Demo of White Gap Bug in IE6 Drop-down List Menus

This is a demo of an Internet Explorer bug that occurs in both IE6 and IE7, although in slightly different situations.

The bug manifests itself as narrow horizontal transparent gaps between the items in a drop down list menu. People discussing the bug often refer to the gaps as being "white" but as you can see on this demo if you look closely, the gaps are transparent. When hovering the mouse over the areas below the topmost gap, the menu disappears, rendering it unusable

The red "White Gap" top menu item displays the problem in both IE6 and IE7.

The purple "Space Fix (not!)" item shows what appears to be a fix. By adding a single space after each menu text string, the menu shows no gaps. Click to see large IE6 ScreenshotHowever, on mouseover in IE6, the menu operation still fails. In IE7 this fix works, however even if it worked in all versions of IE it would be hard to recommend in any case because it relies on managing white space that could easily be unintentionally changed.

The green "Width Fix" shows the best solution I've come up with. Simply moving the width spec from the <li> element to the <a> element closes the gaps, and causes the menu to work

The final orange menu item "Inline Width" is simply a demonstration of the same success fixing the problem whether the width spec is applied in the stylesheet or inline.

Have read on at least one site that the problem can be fixed by applying a -3px margin to <li>. I tried that, and may have done it wrong, but for me it fixed the appearance, but not the function. (http://css-discuss.incutio.com/?page=InternetExplorerWinBugs)

It has also been suggested that keeping the entire <li> element on a single line with no breaks can fix the problem. I have not tested that

Click Here to see a bug-free version of this MultiColor SuckerFish Horizontal DropDown Menu.

Return to tightCSS Home Page