Extra Space in TD

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Stanley - 30 Oct 2006 20:23 GMT

The following HTML works as expected in IE6 and IE7, but in Firefox,
there is extra space below the image. I tried setting margin and
padding to 0 for different elements but still cannot get rid of it. Any
idea what causes the space?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<table style="background-color: yellow" cellpadding="0" cellspacing="4"
border="0">
<tr>
<td style="background-color: green"><img src="alpha_1x1.gif"
width="50" height="50" border="0" style="background-color: red"></td>
</tr>
</table>

</body>
</html>

Reply to this Message

Els - 30 Oct 2006 20:45 GMT

> The following HTML works as expected in IE6 and IE7, but in Firefox,
> there is extra space below the image. I tried setting margin and
> padding to 0 for different elements but still cannot get rid of it. Any
> idea what causes the space?

Inline images are like text - there is space below it, to make room
for the descenders of g,j,p,q and y.

Try this:
td img{display:block;}

Signature

Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Reply to this Message

dorayme - 30 Oct 2006 22:11 GMT

> Inline images are like text - there is space below it, to make room
> for the descenders of g,j,p,q and y.
>
> Try this:
> td img{display:block;}

A nice bit of information, Els. Useful when making and styling
captions.

Signature

dorayme

Reply to this Message

Stanley - 30 Oct 2006 22:34 GMT

This fixed it! Thanks, Els!

> > The following HTML works as expected in IE6 and IE7, but in Firefox,
> > there is extra space below the image. I tried setting margin and
[quoted text clipped - 10 lines]
> Els http://locusmeus.com/
> accessible web design: http://locusoptimus.com/

Reply to this Message

rh - 31 Oct 2006 02:06 GMT

<snip>

> Inline images are like text - there is space below it, to make room
> for the descenders of g,j,p,q and y.
>
> Try this:
> td img{display:block;}

you can also use:

vertical-align: bottom;

which maintains the inline display for the image

Rich

Reply to this Message

Ben C - 31 Oct 2006 08:41 GMT

><snip>
>> Inline images are like text - there is space below it, to make room
[quoted text clipped - 8 lines]
>
> which maintains the inline display for the image

That still leaves room for descenders though.

Reply to this Message

Els - 31 Oct 2006 15:15 GMT

>><snip>
>>> Inline images are like text - there is space below it, to make room
[quoted text clipped - 10 lines]
>
> That still leaves room for descenders though.

Only if you set it on the td, not when set on the image itself.
But depending on the height of the image, the value for line-height,
and whether there is more text and the height of that text, it may
leave a space *above* the image. (room for ascenders :-) )

Signature

Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Reply to this Message

rh - 31 Oct 2006 20:27 GMT

<snip>

> > That still leaves room for descenders though.
>
> Only if you set it on the td, not when set on the image itself.
> But depending on the height of the image, the value for line-height,
> and whether there is more text and the height of that text, it may
> leave a space *above* the image. (room for ascenders :-) )

I should've been more specific.

The op had one image (no text) in a td cell.

A simple way to remove the space below the image is to use vertical-align:
bottom;

td img {
vertical-align: bottom;
}

Rich

Reply to this Message

Sid - 30 Oct 2006 21:33 GMT

: The following HTML works as expected in IE6 and IE7, but in Firefox,
: there is extra space below the image. I tried setting margin and
[quoted text clipped - 18 lines]
: </body>
: </html>

It's the cellspacing=4 that causes it.

Sid

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2006

Extra Space in TD