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>

Oct 30 '06 #1

Follow Post Reply

11242

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/

Oct 30 '06 #2

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

Oct 30 '06 #3

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

Oct 30 '06 #4

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/

Oct 30 '06 #5

"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

Oct 31 '06 #6

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.

Oct 31 '06 #7

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/

Oct 31 '06 #8

<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

Oct 31 '06 #9

This discussion thread is closed

Similar topics