Welcome to WebmasterWorld Guest from 54.146.221.231

Forum Moderators: incrediBILL

Message Too Old, No Replies

table cell height bug in firefox

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

New User

5+ Year Member

joined:Sept 20, 2006
posts:7
votes: 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)

12:44 pm on Sept 20, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 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

2:37 pm on Sept 20, 2006 (gmt 0)

New User

5+ Year Member

joined:Sept 20, 2006
posts:7
votes: 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

2:50 pm on Sept 20, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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?
3:50 pm on Sept 20, 2006 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 12, 2006
posts:140
votes: 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.
6:41 pm on Sept 20, 2006 (gmt 0)

New User

5+ Year Member

joined:Sept 20, 2006
posts: 7
votes: 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

6:47 pm on Sept 20, 2006 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 12, 2006
posts:140
votes: 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.
9:29 pm on Sept 20, 2006 (gmt 0)

New User

5+ Year Member

joined:Sept 20, 2006
posts:7
votes: 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

10:30 pm on Sept 20, 2006 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 12, 2006
posts:140
votes: 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."
12:29 pm on Sept 21, 2006 (gmt 0)

New User

5+ Year Member

joined:Sept 20, 2006
posts:7
votes: 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

9:54 am on Sept 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 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]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members