Extra Space in TD

Stanley

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>

Els

Stanley wrote:

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;}

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

Sid

On 30 Oct 2006 11:23:08 -0800, "Stanley" <st**********@yahoo.com>
wrote:

: 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>
It's the cellspacing=4 that causes it.

Sid

dorayme

In article <19******************************@40tude.net>,
Els <el*********@tiscali.nlwrote:

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.

--
dorayme

Stanley

This fixed it! Thanks, Els!

Els wrote:

Stanley wrote:

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;}

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

rh

"Els" <el*********@tiscali.nlwrote in message
news:19******************************@40tude.net.. .
<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

Ben C

On 2006-10-31, rh <di*************@cableone.netwrote:

>
"Els" <el*********@tiscali.nlwrote in message
news:19******************************@40tude.net.. .
<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

That still leaves room for descenders though.

Els

Ben C wrote:

On 2006-10-31, rh <di*************@cableone.netwrote:
>>
"Els" <el*********@tiscali.nlwrote in message
news:19******************************@40tude.net. ..
<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

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

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

rh

<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

Extra Space in TD

This discussion thread is closed

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ