Empty Space

This issue was fixed in Internet Explorer 9.

Empty space? What do I care? Time for a quick lesson. The DOM standard allows you to see all parts of a document, including the elements that make it up, the text they contain, the element attributes, even the HTML comments, and yes, the blank space inbetween tags.

That is, in everything except IE. It does not think that we want to see the white space, so it hides it (personally, I find this quite funny because of the way it handles these nodes when displaying the page). Quite correct. Most of the time, we don't care. After all, a blank gap between an opening paragraph tag and the opening tag of the link inside it is completely irrelevant. Or is it?

What if I wanted to change that blank text to something else. To put some words in there? Well, in standards compliant browsers, we reference the first child of the paragraph and change its nodeValue. In IE, we have to create a new text node, give it a nodeValue, reference the first child of the paragraph and insert the new node into the paragraph, before the first child. Grrr! Look IE. The standard says for you to give me the document as I wrote it. Don't modify it and expect me to know what you have done.

Even removing the space between closing and opening tags can cause problems, even if no text is permitted there. Why? Because it changes the length of the childNodes array. Scripts that walk through this array are presented with different lengths in different browsers. This sort of incompatibility makes DOM tree walking much harder than it needs to be. Once again, thanks to good old IE.

Workaround: Remove the blank space between tags wherever possible. Or use alternative methods to walk the DOM tree. (As for the extra space you can see in the list, IE does not like block elements in LI tags; it makes it leave a gap, but if you make the LI elements display:inline; it will look normal.)

Move on to the next page in this article > >