Monday, March 2, 2009

Unwanted space between li elements in IE

I ran into an old problem today... a problem where some extra white space was appearing between items in a list.
In this particular case it was only appearing below list elements in an ul where the li contained an image.
Caused the problem:
<ul>
<li><img src="submenu.gif" /></li>
<li>Contact Us</li>
</ul>

Fixed the problem:
<ul>
<li><img src="submenu.gif" />& nbsp;</li>
<li>Contact Us</li>
</ul>

To fix the issue I ended up manually adding a space with the html code & nbsp;
I recall this issue occuring with some floated divs in IE6 as well, though this time I was having the issue with IE7.

It's a really odd fix to a bug in IE7, but it does seem to work and doesn't seem to cause adverse affects in other browsers.

No comments: