Table height calculated incorrectly when cells contain images

RESOLVED DUPLICATE of bug 22274

Status

()

Core
Layout: Tables
RESOLVED DUPLICATE of bug 22274
17 years ago
16 years ago

People

(Reporter: tmh, Assigned: karnaze (gone))

Tracking

Trunk
x86
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

17 years ago
I couldn't find anything that quite matched this, it's so obvious it's probably
been reported elsewhere though...

mozilla is incorrectly calculating the height of the image or table when
rendering tables with images.  The image is too deep by a couple of pixels. 
This makes certain types of page layout look quite bad.

The following demonstrates the bug nicely.  The table height should be the
same as the image height (it works correctly on NS4/IE).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title></title>
</head>

<body>

<table border="1" width="770" cellspacing="0" cellpadding="0">
 <tr>
  <td width="10%"><img src="EMlogoSmall.jpg" alt="" /></td>
  <td style="background-color: blue" width="80%"></td>
 </tr>
</table>

</body>
</html>
AFAIK it is working as it should: The default alignment of images is to align
the baseline(bottom) of the image to the baseline of text. The blank space you
are seeing under the image is the remaining height of the text row under its
baseline. Alignment to fit snugly in the table requires align="left" "center"
"top" "right"; or style="display:block" ...etc. ....or resorting to quirks mode
for forgiveness on such matters.

Comment 2

17 years ago
Dupe of Bug 22274

Comment 3

17 years ago
Alignment doesn't fix it... align=top or middle changes nothing, align=bottom
actually chops the top row off the image!  align=left and align=right simply
move the blank space to the left/right of the image respectively.  I don't buy
it having anything to do with fonts...  that doesn't explain the effect with the
left/right.

It looks from the other thread there is no intention of fixing this... sigh... 
I'm usually against putting 'this page needs xxx browser' on pages but it looks
like in this case I'll have to.
> Alignment doesn't fix it... align=top or middle changes nothing, align=bottom
> actually chops the top row off the image!

You should try valign instead of align (on the image, not the table) or use
style="display:block".

> align=left and align=right simply
> move the blank space to the left/right of the image respectively.  I don't buy
> it having anything to do with fonts...  that doesn't explain the effect with the
> left/right.

Because 10% + 80% < 100% ?
I really think this is a dupe of bug 22274.
Ignore my comments about "valign". I mixed up CSS properties and HTML attributes.

Comment 6

16 years ago
I would suggest experimenting with line-height's and font-size's.
Marking DUP

*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.