IE6 rendering bug. Some parsed <li> elements are losing their closing tags.
- by Jeff Fohl
I have been working with IE6 for many years [sob], but have never seen this particular bug before, and I can't seem to find a reference to it on the Web. The problem appears to be with how IE6 is parsing the HTML of a nested list. Even though the markup is correct, IE6 somehow munges the code when it is parsed, and drops the closing tags of some of the <li> elements.
For example, take the following code:
<!DOCTYPE html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<ul>
<li><a href=''>Child A</a>
<div>
<ul>
<li><a href=''>Grandchild A</a></li>
</ul>
</div>
</li>
<li><a href=''>The Child B Which Is Not A</a>
<div>
<ul>
<li><a href=''>Grandchild B</a></li>
<li><a href=''>Grandchild C</a></li>
</ul>
</div>
</li>
<li><a href=''>Deep Purple</a></li>
<li><a href=''>Led Zeppelin</a></li>
</ul>
</div>
</body>
</html>
Now take a look at how IE6 renders this code, after it has run it through the IE6 rendering engine:
<HTML>
<HEAD>
<TITLE>My Page</TITLE></HEAD>
<BODY>
<DIV>
<UL>
<LI><A href="">Child A</A>
<DIV>
<UL>
<LI><A href="">Grandchild A</A> </LI>
</UL>
</DIV>
<LI><A href="">The Child B Which Is Not A</A>
<DIV>
<UL>
<LI><A href="">Grandchild B</A>
<LI><A href="">Grandchild C</A> </LI>
</UL>
</DIV>
<LI><A href="">Deep Purple</A>
<LI><A href="">Led Zeppelin</A> </LI>
</UL>
</DIV>
</BODY>
</HTML>
Note how on some of the <li> elements there are no longer any closing tags, even though it existed in the source HTML.
Does anyone have any idea what could be triggering this bug, and if it is possible to avoid it? It seems to be the source of some visual display problems in IE6.
Many thanks for any advice.
