Horizontal tabbed navigation, background-image
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!
May you post imagery of this problem and specify which browser versions in which the problem occurs?
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.
I think your cheat is causing this.
Try creating a sprite for the tabs.
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
Did you solve the 990px problem? I can’t replicate this.
Upon further inspection, it does not line up properly in Safari either, though it is “closer”…
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? -_-
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.
- The topic ‘Horizontal tabbed navigation, background-image’ is closed to new replies.