By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,369 Members | 1,001 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,369 IT Pros & Developers. It's quick & easy.

Extra Space in TD

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.