Take the 2-minute tour ×

First of all: tables, not my design, my apologies.

We have this website where the products on sale are being displayed in a table-layout. The website is already live, but it appears that it hasn't been tested thoroughly enough. The developer is on holidays, so I have to fix it. Problem lies in the box model interpretation, here an example:

Chrome rendering: Chrome rendering

Firefox rendering with firebug overlay: Firefox rendering

What's happening is that Chrome adds the padding to the height of the td (height: 55px + padding-top: 5px + padding bottom: 10px = 70px), while Firefox keeps the given height and adds the padding on the inside. I thought that the box model issue was an IE thing, but alas.

However, the crappy part is that I can't seem to fix it. The td has a colspan="2", which I think meddles with the css.

td.productFooter {
    background-color: #C4BFB9;
    height: 55px;
    padding-bottom: 10px;
    padding-top: 5px;

I've tried to change the display to inline-block (and a few other options), this sets the height properly, but then I lose my background-color (defaults back to the background-color of the table itself). If I set display: block, the height good, but the background only colours the first cell, it ignores the colspan="2".

According to MDN -moz-box-sizing: content-box; should fix it, but that doesn't do anything at all.

Does anyone have an idea how to fix this?

share|improve this question

3 Answers 3

My advice: ditch the tables. It does not take long to code up a tabular style layout using CSS only - especially if the information is generated from a database like product data would be. Just code it up yourself beforehand, then apply it to the live site.

share|improve this answer
That would be my first choice, if the developer were here. He is also my boss :P –  Kablam Aug 14 '12 at 9:18
haha fair enough, but if you were successful, then he shouldn't be annoyed ;) –  MarcusJohnson Aug 14 '12 at 10:22
up vote 0 down vote accepted

I cheated, but it works. Added a div inside the td, with position:relative;height:55px; and that solved it. Not really a pretty solution, I know, but it will do until the new site will go live (three weeks from now).

<td class="productFooter" colspan="2" >
    <div style="position:relative;height:55px">
    *all the content*
share|improve this answer

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=248239 which is fixed in Firefox 16. That's going to ship on October 9.

So depending on your timeframe, the simplest thing may be to just wait until then.

share|improve this answer

Your Answer


