views:

154

answers:

1

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>
<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.

+2  A: 

The </li> is not required in pure HTML (non-XHTML) mode. The same applies to </p> and a few more closing tags. The IE6 engine might have "optimized" them away somehow.

Here's an extract from the W3C spec about the <li> element:

<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: optional

Note the last line.

The visual display problems you're talking about are more often related to hasLayout bugs.

BalusC
Is it just not required to display properly, or will leaving off the closing tags of `<li>` and `<p>` actually validate?
Carson Myers
It's valid HTML, so yes, it will validate. Also see [W3C](http://www.w3.org/TR/html401/struct/lists.html).
BalusC
Thanks, but the problem is that IE6 is eliminating SOME of the `</li>` tags, not all of them. If it was eliminating all of them, this might not be a problem. Even though the doctype I included above is HTML5, in our production environment we are using XHTML, so I need to close the elements. I have tried every hasLayout trick in the book (position:relative, zoom:1, height:1%, etc) to no avail.
Jeff Fohl
It may be worth the effort to ask a direct question about the particular problem. This rendering behaviour is imo not related.
BalusC
Thanks BalusC. I guess this is as close to answer as there is. But, I think the actual answer to the question, "Why is this happening?" is, "Because it is a bug in IE6." Big surprise!
Jeff Fohl