Horizontal tabbed navigation, background-image

  • frzn

    (@frzn)


    11 years, 7 months ago

    I am working on a site here: http://frozenweb.net/crea/

    I’ve nearly completed the navigation but it is a little off. In order to achieve the look I wanted I thought I would be clever and use the background-image “menubgbg.gif” to make one big horizontal image for my “inactive” tabs.

    I began testing it. Looks fine on an iDevice in Safari, but in any other browser it appears to get “stretched” horizontally to 990px, throwing alignment off, whereas it should be 900px wide.

    This is driving me nuts, i’m not sure i’m even making sense at this point. Thanks for any help or suggestions!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months ago

    May you post imagery of this problem and specify which browser versions in which the problem occurs?

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    http://i.imgur.com/AJBBG.jpg

    This is the look I am trying to go for. The tabs should look grey when inactive, then appear tall and red when hovered over.

    The turning red on rollover works beautifully.

    I am using one big image as a background-image to “cheat” and make my grey inactive tabs: http://www.frozenweb.net/crea/menubgbg.gif

    Right now it only has the first “home” tab, to demonstrate how it does not align properly.

    It appears to line up properly in Safari. But when I test in GC, FF, or IE, it appears to be “stretched”.

    For example, This should be 900×41 pixels, but when I take a screenshot and crop it in photoshop its measuring to 990×41.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months ago

    I think your cheat is causing this.

    Try creating a sprite for the tabs.

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    Dang it.

    I replied before you edited your post. Thanks.

    I still don’t understand why I can’t just make a 900px wide image though. Something is stretching it to about 990px

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months ago

    Did you solve the 990px problem? I can’t replicate this.

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    Upon further inspection, it does not line up properly in Safari either, though it is “closer”…

    View post on imgur.com

    So, the red tab should be the same width as the grey, but only taller. It looks stretched in Safari as well, but only in the opposite direction, right? -_-

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    This is what I see in all other browsers (GC, FF, IE) :

    View post on imgur.com

    View post on imgur.com

    It appears squished to the left in Safari, and stretched to the right in all other browsers. No where does it just line up like it should. 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months ago

    The blue/grey image here http://i.imgur.com/RmYRh.png is actually smaller than the red, is this what you mean by squished?

    http://www.frozenweb.net/crea/menubg.png

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    right. the grey tab should be the same width as the red tab. the red tab should only appear taller when in hover.

    something is getting distorted somewhere I am not seeing. everything is set to be 900px wide, but when i take a screenshot and measure it is 990

    i even tried making the image 990px wide, but it still appears stretched and squished the same way. wtf mate.

    Thread Starter frzn

    (@frzn)

    11 years, 7 months ago

    With enough trial and error I got them to line up properly for me in GC, FF, IE.

    But now not lining up in Safari. Any other suggestions?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Horizontal tabbed navigation, background-image’ is closed to new replies.