469,356 Members | 2,003 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

Extra Space in TD

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
8 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
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
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
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
Oct 31 '06 #6
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
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
Oct 31 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by mappo | last post: by
5 posts views Thread by Brian | last post: by
4 posts views Thread by Christoph Haas | last post: by
reply views Thread by Diane Yocom | last post: by
34 posts views Thread by Registered User | last post: by
8 posts views Thread by dancer | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.