Firefox: wrong interpretation of box model? - firefox

Question

I just discovered strange behaviour of Firefox.
If I have a table cell of 100px height, and add 20px padding to it - it's total height should become 140px.
All browsers act correctly, Firefox 8.0 ignores the padding:
http://jsfiddle.net/8wDde/
Anyone knowing a fix?

Answer 1

It seems the best cross browser solution may be to set the full height of the table row equal to height and padding of the cell:
tr {height: 140px;}
See: http://jsfiddle.net/8wDde/19/

Answer 2

that is a strange behave. add display:block; can fix the problem. tested in FF8.01 see:
http://jsfiddle.net/8wDde/1/
But I also do not know why?
I searched in https://developer.mozilla.org/en-US/search?q=table+padding, but did not find anything. May be you can also try to search in there.
UPDATE:
http://jsfiddle.net/8wDde/7/
add overflow:hidden to avoid the td change line.

Answer 3

I couldn't find any information about this on Google, so one way to fix it for Firefox would be to use a CSS hack.
#-moz-document url-prefix() {
td{
height:140px !important;
}
}
Obviously, if the height was 200px, then you'd change that to 240px to account for the missing 20px on top and on bottom.
That targets all Firefox versions, I'm not sure if theres a FF8 specific css hack.
You can see this demo here: http://jsfiddle.net/charlescarver/8wDde/2/
Edit: I like Giberno's answer more

Answer 4

This is a fuller description of a couple of comments I made on another question, hopefully a little bit clearer. Note that Opera has the same behaviour as Firefox.
In the diagram above, the total cell area is the dark box, and the text My Text is the content of the td, and it is that that defines the Cell Box (C).
Now, the CSS 2.1 spec says:
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 computed 'height', the computed 'height' of each cell in the
row, 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). ...
In CSS 2.1, the height of a cell box is the minimum height required by
the content. The table cell's 'height' property can influence the
height of the row (see above), but it does not increase the height of
the cell box.
So td { height:100px; } affects the Row Height (R) (it will be at least 100px high) but does not effect the Cell Box (C).
On the other hand, td { padding:20px; } applies to the Cell Box (C), so if the height of (C) + Top Padding + Bottom Padding is less than 100px, the row height is not affected and is still 100px.
If (C) + Top Padding + Bottom Padding is greater that 100px, the row height will expand to accommodate the full height of (C) + Top Padding + Bottom Padding.
Then td { background-color:blue } applies to the full row height (R) and cell width.
You can see this in action at http://jsfiddle.net/Ez7xz/
The final confusing factor is the value of the computed height of the td in Firebug. What seems to be happening here is that it is assuming that the height is the result of content-box box sizing, and reporting the value of R less the top and bottom padding. While this seems odd, it's not obvious what other value it could reasonably report.