6

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).

Improve this question

3 Answers 3

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yeah that solved my problem. I disregarded this solution before because of some animation problems with scriptaculous in a different situation. In this situation it works though :)
0

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">
Improve this answer

1 Comment

I just tried substituting the doctype in the code above ... no succes
0

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.

Improve this answer

3 Comments

‘display: block’ would stop the cell being treated as a table cell in browsers other than IE, so any other cells would make the layout fall apart.
Have you actually verified that, or just assuming? I am looking at it in Firefox 2, and it looks just like any other table cell to me.
nbsp is only requierd for empty table cells in IE (otherwise it is no cell)