Padding under images in cells?

[Wild Goose]

Hi guys!

When I put an image in table cell I get padding between the bottom of the image and the bottom border of the table even when I set cellpadding to zero.

Here's the HTML I'm using:

<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td>
<img src='images/image.jpg'>
</td>
</tr>
</table>

Is this just the way it is or can I get rid of the padding?

Cheers!

[Paul Jr]

This is a browser quirk that appears when the opening and closing table cell tags (<td>, </td>) are not on the same line. Placing the tags on the same line should fix the problem, or, alternately, you can set the image display to block if the previous suggestion fails:

<style type="text/css">
table td img {
display: block;
}
</style>

That is a descendant selector which states that any image nested within a table cell tag, which is nested witin a table tag, will have the CSS rule display: block; applied to it. You can find some more information on descendant selectors (and many, many more) <here (http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors)>

[Wild Goose]

Cheers P!

That did the trick!

That's strange behaviour, is it an IE issue or common across all browsers I wonder?

Thanks again!

WG

[Paul Jr]

Originally posted by Wild Goose
Cheers P!

That did the trick!

That's strange behaviour, is it an IE issue or common across all browsers I wonder?

Thanks again!

WG
You're welcome. :)


It isn't just an IE issue, but not all browsers are affected. I believe Opera is immune, but I do believe Firebird is affected.

It is very odd behavior. Very, very odd.