IE Whitespace Issue

So I ran into an old IE bug, or I would so much as call it a rendering issue. Whitespace, which should be collapsed by the rendering agent, to form inter-word spaces (except for <PRE>), all other whitespace should be ignored. This issue has been known for quite some time, but I ran into this yet again -- IE8 even. What whitespace? In HTML, spaces, tabs, and return characters are considered to be “whitespace”. One solution is, simply remove all whitespace around your links, and images:

<ul>
 <li>
  <a href="#" >
   <img src="img.gif" alt="Blah" />
  </a>
 </li>
</ul>

As:

<ul><li><a href="#" ><img src="img.gif" alt="Blah" /></a></li></ul>

This method is not very pretty, and makes it difficult to use many auto formatting tools. Another method is to apply inline styles to the parent: li { display: inline; } Also a solution is to apply float left (or right) to the parent container: li { float: left|right; } There are more solutions to this issue, but just keep in mind, IE renders whitespace as whitespace between list elements. I have also seen it rendered when an image or link is simply on its own line. In such cases sometimes applying {display:block;} to your anchor tags might do the trick, but might not be applicable. In such cases the foremost method would be suitable. Good luck. Sources: http://archivist.incutio.com/viewlist/css-discuss/34926 http://www.w3.org/TR/html401/struct/text.html#h-9.1