IE, whitespace and lists

I recently 'discovered' the whitespace bug in IE as it relates to lists. Both Firefox and Safari get it right -- that is, they ignore the whitespace in the markup, but not IE. Here's what I mean:

<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li><a href="">Item 7</a></li>
<li><a href="">Item 8</a></li>

Unfortunately in IE, this list would literally jump around when moused over causing the page to break as it added space under each link! I couldn't figure out what was going on and so after spending uh... well let me put it this way... TOO MUCH TIME!! searching on the Web and the CSS books I own looking for info regarding this bizarre list behavior and IE, I finally went to Barnes & Noble and started combing through their CSS books. Several books into my quest, I came across Sitepoint's new book The Art & Science of CSS and bingo, they had the solution -- yay! In order to get IE to behave like an adult browser and not jump around all over the place like a toddler, you have to put the last angle bracket of each list to start the on the next line. Like so:

<li><a href="">Item 1</a></li
><li><a href="">Item 2</a></li
><li><a href="">Item 3</a></li
><li><a href="">Item 4</a></li
><li><a href="">Item 5</a></li
><li><a href="">Item 6</a></li
><li><a href="">Item 7</a></li
><li><a href="">Item 8</a></li

Ridiculous and BTW, IE 8 still gets this wrong! Hopefully by IE9, Microsoft will get it fixed. 😐

Leave a Reply

Your email address will not be published. Required fields are marked *