CSS Table Display Differences - Chrome Vs Firefox

Question

I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -

http://www.designlagoon.com/what-we-do/

There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.

If anyone can shed some light on what might be causing the problem I'd really appreciate it!

Solution 1

This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?

Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.

Firefox does a miscalculation when adding padding to td.

So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.

Solution 2

Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.

In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!

Comments

[Alohci]

I'm not convinced that Firefox is wrong, since Opera does the same thing. I think that it has to do with a subtlety in the CSS 2.1 spec. It says "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." What that means is that the cell box ends up being the height of the row less the padding, which is what Firefox and Opera do. Or something like that - but I admit I'm not sure about it.

[ptriek]

@Alohci The CSS specs you mention don't cover the padding of the element. If I specify a height to the table cell both Chrome and Firefox (correctly) only expand the row height, the height of the cell box remains limited to the height required by its contents - eg. 20px on the table in jsfiddle.net/8wDde, 20px being the standard line height. However, if I add padding to the table cell, this padding should be added to the height set (= border-box sizing, as opposed to content-box sizing), thus expanding the row height. It's a reported bug: tinyurl.com/clde2yh

[Alohci]

Take a look at jsfiddle.net/Ez7xz What I'm trying to say is that the padding is added to the content - not to the cell. Only if the sum of the content height plus the padding exceeds the height of the row, does the cell height change to reflect the height of the row. The computed height reported in Firebug, is kind of a back-calculation, deducting the padding from the cell height as if it assumes there was content-box sizing, but it isn't really (it's not border-box either, but something else) Which probably accounts for why the bug -if that's what it is- hasn't been fixed in 6 years.

[Yuval A.]

This is stupid! I'm sorry that this comment is not contributing for the discussion, but I feel an urge to rant about the fact that this difference in calculations between the browsers exist! Caused me to burn an hour on this. Just settle on a standard... uuf.