IE9 width problem

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?

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; }

How about text-overflow?

+css:

#sub-navigation li span {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

Try this, anyway I don't have IE (Mac rulz) but in my workplace we usually optimize sites for IE too. I'll check it tomorrow if this is not going to work.

Can I ask, why do you have all the dropdowns featured as a nested list inside the last <li> in the navigation?

If it was me, I'd have each dropdown inside it's own list, as a sub-item fo the parent link. This way, you can inherit the horizontal boundaries of the drop-down item for the parent-item, and it should be more straightforward to match widths.

Also, the code will read more logically, and expand more easily in future.

You should set a fixed width to all your li's for the submenu depending on the number you want. right now the first list element should be set to width: 107px.

to test it, just add style="width:107px" to <li class="selected">

Good luck :)