Forum Moderators: not2easy
Ok, I've banged my head against the wall enough on this one. The cells on the following table should each have a 1px wide right border. I've used a valid doctype so IE6 will render in standards mode. My problem is not with IE6, but with NN7. It appears that NN7 is interpreting the box model in quirks mode and is therefore rendering all the cells 1px too narrow.
For example, the width of the "leftMargin" cell is specified as 8px. NN7 is rendering this cell as 7px with a 1px border. Isn't this the "broken" box model? I thought NN7 had the box model right... HELP!
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin:0; padding:0; background:url(images/dotted.gif) 0 80px repeat-x; border-width:0; }
table td { padding:0; margin:0; }
table#test { width:100%; padding:0; }
table#test td { border-right:1px solid #ccc; }
table#test td#leftMargin { width:8px; }
table#test td#nav { width:183px; }
table#test td#mainImage { width:479px; }
table#test td#rightColumn { width:95px; }
table#test td.noRightBorder { border-right-width:0; }
</style>
</head>
<body>
<table id="test" cellspacing="0">
<tr>
<td id="leftMargin"><img src="images/spacer.gif" width="1" height="1" /></td>
<td id="nav"><img src="images/spacer.gif" width="1" height="1" /></td>
<td id="mainImage"><img src="images/spacer.gif" width="1" height="384" /></td>
<td id="rightColumn"><img src="images/spacer.gif" width="1" height="1" /></td>
<td class="noRightBorder"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
</table>
</body>
</html>
Thanks for any help you can offer!
-Damon
