Question

http://testing.ipalaces.org/ looks different in IE9 where the 2nd LI in sub-navigation makes the top border. It seems the width it’s at now works for every major browser but IE9. If I set it to exactly 3px less, it works good in IE9.

Is this a known bug? can I get around this without doing a conditional IE9 CSS call?

Answer 1

The problem is that without an explicit width, #sub-navigation li.selected renders a few pixels wider in IE 9 because of font rendering, interrupting the next floated element. Forcing a width will fix it.

Also, Verdana in bold renders relatively wide so you should consider dropping it from the font-stack.

#sub-navigation li { font:700 16px/1 geneva, sans-serif; }
#sub-navigation li.selected { width:105px; }