Tip: Eliminate unwanted whitespace in Internet Explorer list rendering

Sometimes Internet Explorer adds unwanted whitespace and separates list items in unwanted ways. The way to fix this is to remove all the whitespace from the list items in the code. There are two options for how to do this.

The first way is to “break” the closing list item tag like this:
<ul>
<li>list text</li
><li>list text</li
><li>list text</li
></ul>

The second method is to run all the list items together in one string like this:
<ul>
<li>list text</li><li>list text</li><li>list text</li>
</ul>

Additional note: there is information about the cause and cure for this problem at the CSS Creator Forum that doesn’t involve writing mangled HTML code.

One thought on “Tip: Eliminate unwanted whitespace in Internet Explorer list rendering

  1. pity that IE doesn’t render according to standards. If it did then workarounds like that wouldn’t be needed.

    I personaly gave up trying to take IE into account some time ago.

    In fact, I think I’m going to start putting Firefox and Opera download links on all of the sites I work on.

    Selifs last blog post.. Time For A New Look

Leave a Reply