This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2006 > Extra Space in TD
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| Stanley 2006-11-05, 11:33 pm |
| 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>
| |
|
| 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/
| |
|
| On 30 Oct 2006 11:23:08 -0800, "Stanley" <stanleychmok@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 2006-11-05, 11:33 pm |
| In article <19is2my00ba3m$.nib2as7lb57u$.dlg@40tude.net>,
Els <els.aNOSPAM@tiscali.nl> wrote:
> 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 2006-11-05, 11:33 pm |
| This fixed it! Thanks, Els!
Els wrote:
> Stanley wrote:
>
>
> 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/
| |
|
|
"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:19is2my00ba3m$.nib2as7lb57u$.dlg@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 2006-11-05, 11:33 pm |
| Newsgroups: comp.infosystems.www.authoring.stylesheets
X-Trace: sv3-Af3eqW71c8iwo4+ijB8fKiWWxHoo/Fiu+2oxtnuSyYOG57u0eyzUdEBeXK+H2m8wFqOtTAyKmui/MR2!g7sh6Yyxjahf3rAmUy5UJj9jglvDFsquY754SddtCIDCuQWAAQvQ/TT0FuZhczlTkfQGpHijKo7E!5XlFy8G1rk5o
NNTP-Posting-Date: Tue, 31 Oct 2006 01:41:55 -0600
User-Agent: slrn/0.9.8.0 (Linux)
X-Complaints-To: abuse@eclipse.net.uk
X-DMCA-Complaints-To: abuse@eclipse.net.uk
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.32
On 2006-10-31, rh <disposable12345@cableone.net> wrote:
>
> "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> news:19is2my00ba3m$.nib2as7lb57u$.dlg@40tude.net...
><snip>
>
> you can also use:
>
> vertical-align: bottom;
>
> which maintains the inline display for the image
That still leaves room for descenders though.
| |
|
| Ben C wrote:
> On 2006-10-31, rh <disposable12345@cableone.net> wrote:
>
> 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/
| |
|
| <snip>
>
> 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
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|