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