drtanz — 2012-05-25T05:46:14-04:00 — #1
Whilst surfing the website http://bit.ly/KxbzXU I noticed that there is a small overlay problem on their homepage when viewed in IE9 .
As you can see from the below screen grab the “Contact Us” Tab field shifts onto the second layer nav panel.
How can I fix that?
ralphm — 2012-05-25T18:42:33-04:00 — #2
Different browsers calculate pixels differently. If you reduce the left-right padding on the links a bit, they will all fit on one line. However, if someone has their font size bumped up a bit, you'll find those links start to drop anyhow ... so trying to get them to fit in a tight space like that isn't a good idea.
The obvious problem with reducing the padding is that the links don't look evenly distributed. There is a nice way around this, consisting of unfloating the last LI and adding overflow: hidden, as mentioned here: