Whitespace Bug in IE

When you sometimes mistakingly place some white space between some text and an end tag it causes your document to display incorrectly.

Causes of Whitespace?

When you use a space, tab, newline, carriage return, or line feed.


Whitespace in lists

The whitespace bug in all versions of Internet Explorer for Windows destroys layouts that use lists to create menus. To avoid triggering the bug, you need to remove the whitespace from your lists.

How to correct the whitespace bug.

Instead of writing:


<ul>
<li>item one</li>
<li>item two</li>
</ul>

You write:


<ul><li>item one</li><li>item two</li></ul>

Personally I don’t like this kind of html structure because it makes it hard to edit when you have many lines of code.

Conclusion

Make sure you get rid of the gaps between your html/xhtml tags when designing your web pages. It will save you a lot of grief later when you are wondering why your document doesn’t display correctly.

Resources

White Space Bugs in Browsers

IE White Space Bug

Speak Your Mind

*