Table cell and border displaying differently in IE/Chrome and Firefox/Opera

StackOverflow https://stackoverflow.com/questions/701332

  •  22-08-2019
  •  | 
  •  

Question

After several hours of frustration I finally turned to the internet for the answer. Imagine this extremely simple piece of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

Now this seems pretty straightforward, create a table cell 100px wide and 100px high with a 6px border. As simple as it seems, it looks different in different browsers. In IE8 and google chrome the table cell is 112 x 112 px (so 100px inside and 6px outside). In Firefox 3 and opera the table is 112 x 100 px (so for some reason the border is added to the table width but not to the table height).

Seriously, what gives? And how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).

Was it helpful?

Solution

Seriously, what gives?

Yeah... table cell heights and vertical border are really quite ill-defined in the CSS 2.1 specification. There's nothing that explains fully how they interact, and the standard block model doesn't quite cover it. The figure in section 17.6.1 where they demonstrate the definition of widths pointedly doesn't cover heights.

FWIW I don't think Mozilla/Opera's interpretation makes any sense, but I can't say it's out-and-out wrong.

how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).

How about a div inside the table?

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

Now it's clear which measurement the ‘100px’ refers to. This works for me.

OTHER TIPS

Have you tried other DOCTYPES? I have had good luck with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I messed around with it a little, and there are a couple things, put together, that made them look the same for me in IE7 and Firefox 2. The two things I had to do were:

a) add display:block; to the style for the table cell (made Firefox render the cell height in the same way as IE did);

b) added a non-breaking space to the cell (otherwise IE didn't display the borders).

I don't have IE8 or Firefox 3 loaded, but you can give it a try. Not sure if there are any side effects to changing the display to block, but it does solve the issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top