[thelist] IE LI UL DOM problem

[Simon Perry]

Andreas Wahlin wrote:

>Woho, I managed to cram in lots of acronyms in the subject.
>Seriously though, I have list like this
>
><ul>
><li id="1">text</li>
><ul id="2">
><li>next level</li>
></ul>
><li id="3">first level again</li>
></ul>
>
>Now, opera and FF gladly goes along with considering 1 and 2 as siblings
>when traversing the DOM, however, IE does not recognice the ul (id==2)
>at all, like it wasn't there. I've tried 1.nextSibling and gotten 3
>rather than 2 (hope you follow my non-javascript quicky code here)
>Have I just missed the solution to this problem somewhere? Seems like a
>major bug IMHO.
>Help very much appreciated or I'll have to come up with a nasty solution
>of sorts to hack around it. 
>(and I don't think it's my codes fault, since the page works as it
>should in both opera and ff)
>
>  
>
No, it is an IE thing where it treats white space content. If you use 
the DOM inspector in FireFox you may be able to see the "false" elements 
(shown as #text but with no value) as well. The fix is simple though 
move the white space to a non standard location as follows.

<ul
 ><li>text<ul
 ><li>next level</li
 ></ul></li><li
 >first level again</li
 ></ul>

You will also note that I have changed the markup slightly as your 
second level menu placing was invalid and should have been a child to an 
li of the top level not inserted directly into the ul block as you had 
done. You shouldn't need id's or classes for all your nodes as every one 
should be easily isolated, manipulated and styled using just the DOM.

Simon