IE bug with TD's tables and whitespace?

Question

Hi there,

I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, its basically where the four corners have a td and and img (its a rounded corner form) .. if i remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr

I need to remove the the whitespace between the img and the TD, is there a better work around, as i have lots and not only that if i reformat the document the problem returns..

here is a simple example..

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

as you can see there is white space between img and td... and i remove it so it looks like this

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

the problem is gone, (notice the td and image are right next to each other)

Any ideas, i tried setting all sorts of css, padding 0px, margins 0px etc ...

Any ideas really appreciated

Answer 1

IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.

Answer 2

Hi,

It's been this way for as far back as I can remember, all versions.

For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.

Answer 3

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. :)

Answer 4

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 to have 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!