WordPress.org

Ready to get started?Download WordPress

Forums

Horizontal tabbed navigation, background-image (11 posts)

  1. frzn
    Member
    Posted 1 year 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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. frzn
    Member
    Posted 1 year 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 900x41 pixels, but when I take a screenshot and crop it in photoshop its measuring to 990x41.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I think your cheat is causing this.

    Try creating a sprite for the tabs.

  5. frzn
    Member
    Posted 1 year 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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  7. frzn
    Member
    Posted 1 year ago #

    Upon further inspection, it does not line up properly in Safari either, though it is "closer"...

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

    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? -_-

  8. frzn
    Member
    Posted 1 year ago #

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

    http://i.imgur.com/RmYRh.png

    http://i.imgur.com/aWjqS.png

    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. :)

  9. Andrew
    Forum Moderator
    Posted 1 year 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

  10. frzn
    Member
    Posted 1 year 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.

  11. frzn
    Member
    Posted 1 year 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?

Topic Closed

This topic has been closed to new replies.

About this Topic