[thelist] border-spacing, offsetWidth, W3C recommendations

Sat Mar 8 17:35:00 CST 2003

I'm going for pixel-precision on a complex table, and have it working
in all target browsers. However ...

There is an equation on <http://www.w3.org/TR/REC-CSS2/tables.html> to
determine the width of a table:

row-width = (0.5 * border-width0) + padding-left1 + width1 +
padding-right1 + border-width1 + padding-left2 +...+ padding-rightn +
(0.5 * border-widthn)

If I'm understanding and testing things correctly, no browser I have
behaves "correctly" regarding this - the table width always includes
all of the outermost border-widths, not just half of them.

Or does offsetWidth include the margin of the element and when you
define the width of a table in px, the margins are included within
those pixels?

I'm testing by measuring screenshots in PS and with the following
script. Is my thinking correct: I'm building something that will break
in a browser that behaves like the W3C thinks it should?

Here's how I'm finding out how wide my table is ... what am I doing
wrong?

<script language="javascript" type="text/javascript">
  function showWidth() {
    tbl = document.getElementById('my');
    alert(tbl.offsetWidth);
   }
window.onload = showWidth;
</script>
</head>
<body>
<table id="my" style="background-color:#f00;">
<tr>
<td style="background-color:#fff; padding:0px;
border-collapse:separate; border-spacing:2px;"><img
src="i/sp_clear.gif" alt="" width="1" height="1" /></td>
<td style="background-color:#fff; padding:0px;
border-collapse:separate; border-spacing:2px;"><img
src="i/sp_clear.gif" alt="" width="1" height="1" /></td>
<td style="background-color:#fff; padding:0px;
border-collapse:separate; border-spacing:2px;"><img
src="i/sp_clear.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
-----------------------
Erik Mattheis
GoZz Digital
<http://goZz.com/>
Flash and ColdFusion Development
Minneapolis, MN
-----------------------