HTML/CSS: Table cell with image rendered too large in IE

Question

I have the following simple table to reproduce the issue:

<TABLE>
  <TR>
    <TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
    <IMG 
      style="width: 24px; height: 68px; margin:0px; padding:0px; border:none" 
      src="Image24x68.png"> 
    </TD>
  </TR>
</TABLE>

The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.

I want the cell to be exactly as large as the image.

The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.

Is there any solution / workaround for this? Thanks a lot

Answer 1

Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/

Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.

Answer 2

You can set the images to display as block elements and this should remove the space.

<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">

Answer 3

Try the following:

<table>
  <tr>
    <td style="border: 1px solid black; font-size: 1pt;">
    <img style="width: 24px; height: 68px; margin: 0;
       padding: 0; border: 0" src="Image24x68.png" /> 
    </td>
  </tr>
</table>

(PS Use lower case for HTML tags.)