This bug is fixed in the RTM version of IE7!

The problem here is that there is a lot of space between the menu items. It actually looks like IE7 is rendering a full-height bit of invisible text under each LI - select all the text in the menu to see this hidden text. This menu renders correctly in Firefox 1.5, IE6, Safari, and Opera 8, among others.

It appears that the bug is triggered by having anchors inside the LI tags that are set to display:block. Removing display:block from the A tags removes the bug.

There's a further wrinkle. If I omit both of the "width" rules, both IE7 and IE6 will render extra space. If I omit only the "width: 300px" rule, both browsers render correctly. However, with BOTH "width: 300px" in the "li a" selector AND "width:auto" in the "html>body li a" selector, IE7 renders inccorectly while IE6 renders correctly. I suspect IE6 would render incorrectly if it knew anything about the child selector syntax. It's interesting that this bug only surfaces if the rule is "width: auto" (any other width fails to show the bug), and only if that rule is in a child-selector rule.

CSS styles:

li a {
  display: block;
  border: 1px solid black; /* this is for illustration - it is not necessary to repro the bug */
  width: 300px;
}

li > a {
  width: auto;
}        %p The test is ugly because I've removed as much of the styling as possible. Sorry.

- Ben Hollis (BenHollis.net)