Remove image padding in table td cell?

HTML & CSS
1

i really need to remove the grey space under my image in my <td>.

I have set all my cellpadding and cellspacing to zero.

It is fine in safari and firefox, but in ie there is an annoying space. here is the page

http://www.imagex.co.uk/imagetest/

and here is my code:-

<table width=“900” cellpadding=“0” cellspacing=“0”>
<tr>
<td colspan=“2” align=“center” height=“25” bgcolor=“#6d6a6a”>

		&lt;table height="25" cellpadding="0" cellspacing="0" border="0"&gt;
			&lt;tr&gt;
				&lt;td height="25"&gt;
				&lt;img src="buttonhome.jpg" name="a" border ="0"&gt;
				&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;
	&lt;/td&gt;
&lt;/tr&gt;

</table>

2

Wish i could help with your actual problem, but I would seriously consider dropping the tables altogether and start using some CSS with div’s.

3

I’m going to take a guess here-It is the space left under an image for text. Add vertical-align:bottom to your image.

4

I see:
http://ipinfo.info/netrenderer/index.php?browser=ie6&url=http://www.imagex.co.uk/imagetest/

As Ryan stated:
img { vertical-align: bottom; }

5

seems like that tag shouldnt be needed, seeing as my iage was 25px high and my td was 25px high, but it seems to have worked, thanks guys :slight_smile:

6

It always leaves room for child text descendants. Possible fixes are here.

Your welcome :).

7

Yes, it is needed. Images by default generate inline boxes. Inline boxes are by default aligned so that the text baselines line up. An image doesn’t have a baseline, so the bottom of the image box will align against the text baseline of the cell. The baseline is always a few pixels above the bottom of the cell box, to leave room for the descenders of lowercase letters like ‘g’ and ‘y’.

Therefore, there will be a gap between the bottom of the image and the bottom of the cell if you use the default settings. If you don’t want the gap you must tell the browser to align the image to the bottom of the cell (or use display:block to make it generate a block-level box instead).

The height of your table cell is just a minimum height. If the content requires more space, the cell will expand. And your image needed 25px + a few pixels.

8

I know it possibly sounds silly but just remove whats between the image and td tags, on images it will add one space

<table width=“900” cellpadding=“0” cellspacing=“0”>
<tr>
<td colspan=“2” align=“center” height=“25” bgcolor=“#6d6a6a”>

<table height=“25” cellpadding=“0” cellspacing=“0” border=“0”>
<tr>
<td height=“25”><img src=“buttonhome.jpg” name=“a” border =“0”></td>
</tr>
</table>
</td>
</tr>
</table>

9

No removing the white space in the HTML won’t stop what inline generated boxes do by default (well I’m referringto the space left under images)

10

I know, but I swear to you if you take that white space out of the html there will not be a gap under the image. Try your code then mine in dreamweaver. I had this problem a few years ago. It takes all those spaces in your html between the imag tag and </td> and adds a character space under the image.