IE7 and nested unordered lists

Internet Explorer displays extra space for an empty LI

[goldenmean]

I wanted to reply to an older thread, but it was too old to accept comments. However, I will refer you to that thread:

[webmasterworld.com...]

Everyone was right about this topic and unfortunately the fix turned out to be the use of invalid xhtml. UL tags must be nested within an LI element of a parent UL, or it is NOT valid xhtml.

So, the real fix is to get IE6 and 7 to use CSS that other browsers will ignore. In my example, the parent LI of the nested UL element has the class name "container_". Here is the CSS I used to fix the problem.

li { font-size: 1em; }
li.container { list-style-type: none; }
li.container_ ul { margin-top: 0; }/* W3C COMPATIBLE */
*:first-child+html li.container_ ul { margin-top: -1em; }/* IE7 HACK */
* html li.container_ ul { margin-top: -1em; }/* IE6 HACK */

This worked for me!

[swa66]

Better yet, use conditional comments instead of the hacks.