Question

I’ve been asked to design a fly-out menu for a pre-existing site and it looks and behaves fine on all browsers except IE7. For some reason, different versions of IE7 behave differently. I have been battling with this for the past two days and after testing with IE v7.0.5730.11, the menu looks good, positions correctly, but has weird disappearing acts. Users with other minor versions of IE7 report inconsistent issues with positioning and rendering.

Would you kind people be able help me detect the offending CSS/HTML from this site?

Answer 1

I guess I’ll answer my own question. The main problem I was facing with the menu was that the <li> elements did not have layout (hasLayout = false) in IE7, so with the help of this site, I had to use:

ul#mainmenu li ul li,
ul#mainmenu li ul li span {
    display: block;
    max-width: 100%; 
}

to give these items layout. This created a 1px gap between the list items. When the mouse hovered over this 1px gap, the menu would dissapear, so I fixed that by using the following css:

ul#mainmenu li ul li {
    margin-bottom: -1px;
}

Hope this helps someone.