IE 7 Whitespace Bug - Here's how I fixed it

[oswegan]

IE 7 has what's called a "Whitespace Bug" that will add hidden whitespace beneath items that are in a table, or in an unordered/ordered list.

The way that it was affecting my site was that it was inserting a tiny amount of whitespace along the bottom of the main photos on my "about" and "gear" pages, which made it look like the photo height was not properly filling up the photo frame outline.

The photos are inserted in tables and the code looked like this:

<td id="ur" valign="bottom"></td>
</tr>
<tr>
<td id="ml"></td>
<td width="606">
<img src="templates/simplicious/images/gear.jpg" alt="" border="0" />
</td>
<td id="mr" valign="top">
</td>
</tr>
<tr>
<td id="ll" valign="top"></td>
<td id="lm" valign="top">
</td>
<td id="lr" valign="top"></td>
</tr>

I fixed the bug by taking the three lines in red and putting them in one line like this:

<td id="ur" valign="bottom"></td>
</tr>
<tr>
<td id="ml"></td>
<td width="606"><img src="templates/simplicious/images/gear.jpg" alt="" border="0" /></td>
<td id="mr" valign="top">
</td>
</tr>
<tr>
<td id="ll" valign="top"></td>
<td id="lm" valign="top">
</td>
<td id="lr" valign="top"></td>
</tr>

Apparently this work around will also work to correct "ul" and "li" list items, though I have not had to try this yet.