CSS problem with IE6 to render a menu

Question

Hello all,

I'm not a designer, so my knowledge of CSS/Javascript is a bit limited. Unfortunately I received a task to solve an issue with a menu (rendered with div, ul and li elements and CSS/jQuery).

The menu renders fine in all browsers except IE6. But I have no idea on how to fix the problem at hand.

The problem occurs in the following page (again, only in IE6): http://bit.ly/fzFJn

Thanks for any help!

Answer 1

Try adding this (to your IE6-only stylesheet, of course):

.subMenu { zoom: 1 }

That gives submenus "layout" and makes it work for me, though it's a bit hard to test with the menu being dynamic.

If something isn't working correctly in IE6, there's a good chance hasLayout is the culprit.

Edit:

To fix the border problem, you can add vertical-align: top (other values may work as well) to the menu (the <ul>). I can't remember exactly what it is anymore, but IE6 has some issues with margins etc. and list items.