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:
<ul>
<li><a href="http://www.example.com/">Item 1</a></li>
<li><a href="http://www.example.com/">Item 2</a></li>
<li><a href="http://www.example.com/">Item 3</a></li>
<li><a href="http://www.example.com/">Item 4</a></li>
<li><a href="http://www.example.com/">Item 5</a></li>
<li><a href="http://www.example.com/">Item 6</a></li>
<li><a href="http://www.example.com/">Item 7</a></li>
<li><a href="http://www.example.com/">Item 8</a></li>
</ul>
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:
<ul>
<li><a href="http://www.example.com/">Item 1</a></li
><li><a href="http://www.example.com/">Item 2</a></li
><li><a href="http://www.example.com/">Item 3</a></li
><li><a href="http://www.example.com/">Item 4</a></li
><li><a href="http://www.example.com/">Item 5</a></li
><li><a href="http://www.example.com/">Item 6</a></li
><li><a href="http://www.example.com/">Item 7</a></li
><li><a href="http://www.example.com/">Item 8</a></li
></ul>
Ridiculous and BTW, IE 8 still gets this wrong! Hopefully by IE9, Microsoft will get it fixed. 😐