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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

wrong <TD> height when img in neighbor cell

Status
Not open for further replies.
gl03

gl03

Programmer
Mar 17, 2006
2
AT
this seem s to be a simple problem, but still...

I try to build a two-cell horizontal table, one cell containing an image, the other a table cell the same height as the image.

problem is that in IE6win, the empty tablecell is "longer" than the image, even though both cells have their height set to the same value. The same thing happens in Firefox if I change the doctype from transitional to xhtml.

any ideas? here's my (validated) source:

Code: 
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<body style="background-color: #555555">

<table style="height:49px;">
<tr>
<td style="height:49px; width:49px; padding:0px; margin:0px;">
<img src="./test49.gif" alt="img" />
</td>
<td style="height:49px; width:216px; background-color: #CCCCCC; padding:0px; margin:0px;">
</td>
</tr>
</table>

</body>
</html>

and here's the same online:


thanks!!

gl03./
 
Sort by date Sort by votes
What you say is impossible. Tables are built in a way that a row is a row and it ends at the same line. If you turn on borders, you will see that both cells are exactly the same height, only that the first one has some white space below the picture. One solution to fix that would be to put the img and td tags in the same line. Failing that you could try adding margins and padding 0 to the image tag. And all you would need is to put one height or not even that -- an image forcing the correct height would be enough.
Code: 
<td style="height:49px; width:49px; padding:0px; margin:0px;"><img src="./test49.gif" alt="img" /></td>
 
Upvote 0 Downvote
ok, problem solved. for all interested: images are inline elements that are by default aligned to the baseline of a text element. as baseline does not equal bottom (for letters p, j, g, ... which have underlengths) the text cell reaches below the baseline of the image.

solution: changing the 'vertical-align:top;' for the image, or the (default) 'display' attribute for the text.

gl03./
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
800
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
250
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top