Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>tdheight.html</title>
<style>
td {
border: 10px solid black;
padding: 4px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>x</td>
</tr>
</table>
</body>
</html>
The width of the TD will become 50px but the height only 22px, because Firefox seems to do something like the "old IE box model" for the height, ie
border-top + padding-top
+ height
+ padding-bottom + border-bottom
= 50px
in this example.
Does anybody know if there is a CSS hack to work around this? Or is the only way to try to send a different size to Firefox? (f ex IE gets it right so will send correct size to it)
I don't think this is a bug, Firefox is not applying the height because the 'TD' element is not a block element.
If you add "display:block;" to your style sheet it works.
Andrew
So the cells are not ignoring height like "inline" elements do.
Changing to display "block" probably activates another layout algorthm in Firefox, but the algorithm for "table-cell" still seems to be at fault. There should never be any reason to calculate geometry in the old "IE" way, especially not when the correct algorithm is used for width...
Best regards
Mike
@icantthinkofone:
Eer... did you mean IE or Firefox? This bug is about Firefox ;-)
Best regards
Mike
Hm, can you tell me where you find this information? I am used to seeing <td> more as a block-level element, as it can be assigned a height and can contain other block-level elements.
> but he's treating it like a block so, display:block fixes it for
> both browsers.
Not really, if you try
<table>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
> There is no FF bug for this.
Could you please then give me the rationale for FF using a
geometry calculation algorithm where border and padding is
*included* in the specified height instead of added onto it?
And if there is no bug, can you also please tell me the "backed-by-standards" CSS to get table cells with the following properties in Firefox:
- 50px X 50px content area
- 5px padding added on all sides
- 2px border added on all sides
- table cells rendered on "same line" within their row
Best regards
Mike
Thanks for the quote, it made me find this:
[w3.org...]
that actually answers several questions I've had before.
I had a good look through the html and css specs
[w3.org...]
[w3.org...]
and tried to find any mention about display type or height algorithm for <td> elements, but didn't find anything really good. Another, not as authoritative, source
[htmlhelp.com...]
suggests that <td>:s are block-level.
Anyway, disregarding who is wrong of IE or FF I still think it is quite non-intuitive in FF that if I want a 50x50 pixel content area dimension on the following elements (when we have 10px padding and 4px border), I need to specify:
<div> 50x50 ("block")
<img> 50x50 ("replaced inline")
<td> 50x78
So anything to clear this up would be appreciated.
Best regards
Mike
MS format a table cell as a block level element (as viewed in Dom Inspector), explaining why they use the "regular box model" - but FF format it as display: table-cell; and follow the 17.5.3 Table height algorithm [w3.org]
In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). A value of 'auto' for 'height' implies that the value MIN will be used for layout. CSS 2.1 does not define what percentage values of 'height' refer to when specified for table cells.
So perhaps they're both right for the models they've chosen to support?
Anyway a solution might be to set the <tr> height to 78px for FF:
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height).
This ensures that as long as no other cell (in that row) has content greater in height than 78px the <td> cell will fill it. Note: IE will not like this unless you also set the 50px height on the TD.
or alternatively nest your divs as you suggest and format them as the blocks they are..
battle of the giants on this one, wonder who will win :)
Suzy
[edited by: SuzyUK at 9:55 am (utc) on Sep. 22, 2006]
