IE Bug With TD's Tables And Whitespace?

I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form)

Solution 1:

As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.

Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!

Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.

Hope that helps!

Solution 2:

The only way to "fix it" (and I use that term loosely) is to remove the whitespace.

More importantly, you should stop making websites like it's 2001. :)

Solution 3:

I've fixed adding this before the end of table:

<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>

Hope this help.

Solution 4:

This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.

Setting display:block on the images did it for me.

Solution 5:

I tried all solutions above:

a) tried the display:block

b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )

c) I tried using:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Solution a) worked. Solutions b) and c) did not work on IE.

But the BEST SOLUTION I found is this:

Add a hspace=0 attribute to the Image tag. For example:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />

This does the trick.