homepage Welcome to WebmasterWorld Guest from 54.197.19.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
table cell height bug in firefox
mikewse




msg:3089952
 11:40 am on Sep 20, 2006 (gmt 0)

Firefox gets it wrong when calculating height for explicitly sized table cells, see example:

<!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)

 

Little_G




msg:3090011
 12:44 pm on Sep 20, 2006 (gmt 0)

Hi,

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

mikewse




msg:3090139
 2:37 pm on Sep 20, 2006 (gmt 0)

Hm, I don't agree. Firefox *is* applying the height, it just calculates it wrong. Try with different values and you'll see the table cells changing height.

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

tedster




msg:3090160
 2:50 pm on Sep 20, 2006 (gmt 0)

You are using an incomplete DTD - so the quirks mode model is in place. What happens if you go to standards mode by using the full DTD including the W3C url?

icantthinkofone




msg:3090286
 3:50 pm on Sep 20, 2006 (gmt 0)

mike is right. This is a bug in IE but I don't recall much about this. I'll see what I can look up.

mikewse




msg:3090547
 6:41 pm on Sep 20, 2006 (gmt 0)

@tedster:
No, Firefox actually goes into full standards mode without the doctype url. You can see for yourself here:
[developer.mozilla.org...]
(I did a test anyway, and there is no difference.)

@icantthinkofone:
Eer... did you mean IE or Firefox? This bug is about Firefox ;-)

Best regards
Mike

icantthinkofone




msg:3090562
 6:47 pm on Sep 20, 2006 (gmt 0)

Well, I'm walking out the door but, although he says IE is displaying as he wishes, this is not a bug in Firefox. Firefox is displaying correctly and IE is not. As you said, td is an inline element but he's treating it like a block so, display:block fixes it for both browsers. There is no FF bug for this.

mikewse




msg:3090803
 9:29 pm on Sep 20, 2006 (gmt 0)

> As you said, td is an inline element

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>

with td {display:block} in FF, you will not get the cells on the "same line".

> 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

icantthinkofone




msg:3090881
 10:30 pm on Sep 20, 2006 (gmt 0)

Just passing through quickly again. I pointed at the wrong guy when I said "mike is right". I should have said Little_G was right. The <td> element is a little strange when it comes to this stuff and, yes, you can assign height to it. "Height can be applied to all elements but
non-replaced inline elements, table columns, and column groups."

mikewse




msg:3091501
 12:29 pm on Sep 21, 2006 (gmt 0)

> "Height can be applied to all elements but non-replaced
> inline elements, table columns, and column groups."

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

SuzyUK




msg:3092695
 9:54 am on Sep 22, 2006 (gmt 0)

It's a minefield for sure. I think the table layout recs are still being debated with some new properties being defined for CSS3, I also wonder if that's why MS are not supporting the table properties yet as the implementation as it stands just now, seem very close to their own "inline-block" property.

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved