473,320 Members | 1,887 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 11671
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Sidharta | last post by:
Hi all, how come this doesn't work????? # convert to unix new lines $text = preg_replace("/\r\n/", "\n", $text); # remove extra new lines $text = preg_replace("/\n+/", "\n", $text); is...
4
by: mappo | last post by:
There are about a million posts on how to get rid of the extra space _after_ the form end-tag, but I can't find any that solve my problem: extra space _in_ the form tag. I have a table nestled...
5
by: Brian | last post by:
Hello group, http://people.umass.edu/btrembla/ (html 4.01/strict) uses a conventional menu marked up as a list, and css http://people.umass.edu/btrembla/css/brian.css...
4
by: Christoph Haas | last post by:
Evening... I'm writing a simple interactive program to maintain a database. The goal was to print "> " at the beginning of the line, wait for user input and then deal with it. Minimal test...
1
by: Matt Bush | last post by:
Using .NET Framework 1.1 and Visual Studio .NET 2003. Language is VB.NET. When loading an XML String using XMLDocument.LoadXml we are getting an extra space inserted into abbreviated end tags: ...
0
by: Diane Yocom | last post by:
I'm dynamically building a table in the code behind and I'm having a problem with an extra space after the tablerow. The HTML renders like this: <td> <a href="#"><img src="mypicture1.bmp"...
5
by: dw | last post by:
hello - first, let me state that i am an Asp.Net rookie. here is the situation: i have a page that looks good in the vs.net designer, but when the page renders there are extra amounts...
4
by: alf | last post by:
Hi, I can not find out where the extra space comes from. Run following: import os,sys while 1: print 'Question ]?', if sys.stdin.readline().strip() in ('Y','y'): #do something pass
34
by: Registered User | last post by:
Hi experts, I'm trying to write a program that replaces two or more consecutive blanks in a string by a single blank. Here's what I did: #include <stdio.h> #include <string.h> #define MAX 80
8
by: dancer | last post by:
Using ASP.net 1.1 to create user input form. When I put a RequiredFieldValidator I have extra space at the bottom of the cell, as if I had put a <br>. When I comment out the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.