"tab" list, not working in Safari

HTML & CSS
1

Hi,

Once again, it comes down to stupid cross browser compatibility :frowning:

http://cssdesk.com/sw3U6

This works fine in FF, IE and Chrome… but not in Safari (or any Apple mobile devices). If I remove the padding on the li element, it kinda works… but then you loose all the padding on the tab (which I can’t do, as it looks rubbish)

Can anyone spot whats up with it? I really do wish Mozilla, Apple, M$ and any other browser developers would cooperate when making the standards for their browsers… I dread to think how many hours a year I waste trying to fix up cross browser issues :frowning:

TIA!

Andy

2

Don’t set the width/lengths in px. I recomend using ems The ‘problem’ is that different. Bowsers have diferent default text sizes. Safari is probably bigger than the other browsers thus it wraps around.this is not a real crossbrowser issue; If you used text only zoom in the other browser you’d see your layout would break as well.

Hope that helps.

3

OMG you actually legend! I’ve been going round and round in circles with this one! I changed the font to 1.1em, and it works perfectly now - I would never have worked that out!

Thanks again!

Andy

4

Mmm actually, that worked on the demo page - but not on the live one :frowning: Its a bit hard to show a proper demo - as the site is currently behind an IP block (as we dont want google finding it, and penalizing us for duplicated content with the live site)

If your happy to take a look, and provide your IP - please PM it to me, and I’ll add you to the IP block so you can see it :slight_smile:

TIA!

Andy

5

Mmm, I can’t seem to edit my above post?

Anyway - here is a simpler example:

http://cssdesk.com/sw3U6

I’ve removed the .label bit, and just have plain text in the 3rd tab. However, it STILL overflows to the 2nd line in Safari - even though there seems ample space in #cat_tabs #tab_list ul (the bit with a green background)

Any more ideas? I’m really drawing blanks here :frowning:

TIA

Andy

6

Hi,

I can’t see any overflow in your example above. There are three tabs centred on the red bar in Safari PC and Mac.

Am I looking at the wrong thing?

7

Hi,

Thanks for the reply. The problem occurs when you shrink the width of the window down. There still seems to be about 15-20px free on both sides of the tabs, yet the 3rd tab (part of it) jumps down onto the next line. Please see:

Any ideas? I’m really drawing a blank on it ATM :frowning:

TIA

Andy

8

Hi,

Ok I can see safari wraps the element a little earlier than other browsers. It looks like it adds the padding on the inline elements onto the end of the line. A more robust solution would be to use inline-block instead of inline and the browser will take beter care of margins and padding.

e.g.


#tab_list li {
  display:inline-block;
  margin:-5px 0 -1px;
  vertical-align:top;
}

/* ie7 support if needed */
#tab_list li {
*display:inline;
*zoom:1.0;
}

You may need to tweak a few things to get exactly the display as before but should easily be achievable.

9

Hi Paul,

You absolute gem - that was it! :cool:

I changed the display: inline to what you suggested, and it works exactly as it should have in Safari now

Thanks a ton - you saved what little bit of hair I have left! hehe

Thanks again

Andy