Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<!DOCTYPE html> and extra space under a .gif

Status
Not open for further replies.
greathope123

greathope123

Programmer
Nov 1, 2011
84
GB
Hi,

Following code is working fine but one thing I don't understand:
in the cell, there is an extra space under a .gif.
Is this by design?
If I remove <!DOCTYPE html>, the space will disappear, but can I remain <!DOCTYPE html> and remove the space?

<!DOCTYPE html>
<html>
<head>
<style>
table.frame {border: 2px solid #778899; border-collapse:collapse;}
table.frame td {padding: 0;}
</style>
</head>
<body>
<table class="frame">
<tr><td><img src="myGif.gif"></td></tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
I would suggest you use Firebug on the image and see if there is anything that is causing this space.

Is this space added if the image is not used in a table?

Also why are you using a table? Unless its for tabular data the usage is completely incorrect.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
I forgot to add that this sounds like a possible browser quirks mode problem too pertaining to the box model. Css could fix this.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
It's because, by default, <img> is an inline element.

Suppose that inside that <td> you had a line of text with the image in the middle:

Code: 
<td>like <img src="mypic.gif"> this</td>

The text will have a small gap underneath it, to accomodate any descenders and space it out from any lines that may follow, and the image is aligned such that the bottom of the image aligns with the baseline of the text (i.e. above that gap).

Remove the text, and the image will still have that gap underneath it.

So there are three solutions to this problem -

[ol][li]Align the image to the bottom of the element: [tt]table.frame img {vertical-align: bottom;}[/tt][/li]
[li]Remove the gap at the bottom of the line: [tt]table.frame td {line-height: 1;}[/tt][/li]
[li]Don't treat the image as inline text at all: [tt]table.frame img {display: block;}[/tt][/li]
[/ol]

I'd generally go with the third option, but the specifics or your situation may call for one of the others. As noted, a table is a pretty poor way of putting a frame around an image - if you tell us what you're trying to do, maybe we can come up with something better?



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Sure, I hope I can clearly explain what I am trying to do:

In several rows of a table, I have strings and imgs in <td>s.
The img <td>s are for click and in the img <td>:
1. there is link and img but no string,
2. because the img is transparent gif, you can see different color of the <td> when mouse over.

If run following code, you can see the extra space under the .gif.
(is that by design or something I did incorrect?)

If I remove <!DOCTYPE html>, the extra space will disappear, but can I remain <!DOCTYPE html> and remove the space?

<!DOCTYPE html>
<html>
<head>
<style>
table.frame {border: 2px solid #778899; border-collapse:collapse;}
table.frame td {padding: 0;}
</style>
</head>
<body>
<table class="frame">
<tr height="30">
<td>String</td>
<td bgColor="#FFAAAA" onMouseOver="bgColor='#FF0000'" onMouseOut="bgColor='#FFAAAA'">
<a href="A.asp?rate=1"><img src="Rate1.gif" border=0></a></td>
<td bgColor="#FFAAAA" onMouseOver="bgColor='#FF0000'" onMouseOut="bgColor='#FFAAAA'">
<a href="A.asp?rate=2"><img src="Rate2.gif" border=0></a></td>
</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
465
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
821
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
786
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3

Part and Inventory Search

Sponsor

Back
Top