IE’s whitespace between list elements, part 2

So you’re creating a drop-down menu using unordered lists within unordered lists, and you’re using display: block for the li elements, along with a background colour that changes on hover. Looks great in Mozilla, but in IE there’s a mysterious extra space below the list item. It’s not padding and it’s not margin, because both of these have been set to 0!important. But there it is still.

Problem: IE, inexplicably, doesn’t recognise the closing tags for lists (</ul>) and list items (</li>). So any space between your closing tag and the next opening tag is treated as a whitespace. You can close these up, but it makes looking at or editing the markup later a real pain. And even if you do that, if you nest another list inside a list item, the whitespace reappears in IE7 — again, despite closing the gaps and declaring margin: 0.

Solution: Just found this most excellent solution from another blogger: declare float: left; clear: left on the li and the gap closes up! Marvelous!