cellspacing="19px, yet renders between 20px-25px. Why?! [Archive]

Democrazy

09-17-2011, 06:08 AM

I have set cellspacing for a table to 19px, yet when my page renders, the cellspacing is between 20-25px.

I zipped up my HTML document and a .png image that demonstrates the problem:
http://qfs.mobi/f31354

... or you can see the code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<TITLE></TITLE>
<META content="charset=windows-1252;text/html" http-equiv="content-type">
<STYLE type="text/css">
BODY {
color: white;
font-family: verdana
}
DIV.main {
background-color: black;
height: 636px;
left: 50%;
margin-left: -635px;
margin-top: -307px;
position: absolute;
top: 50%;
width: 1270px
}
DIV.pagedescriptor {
left: 50%;
margin-left: -77px;
margin-top: -313px;
position: absolute;
top: 50%
}
TABLE.categorylist {
background-color: green;
height: 606px;
margin-left:7px;
margin-top: -288px;
overflow: hidden;
position: absolute;
top: 50%;
width: 1254px
}
</STYLE>
<DIV>
<DIV class="main">
<DIV class="pagedescriptor">Products:</DIV>
<TABLE cellpadding="0px" cellspacing="19px" class="categorylist">
<TR>
<TD align="center"><A href="./1">1</A><A href="./1"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./2">2</A><A href="./2"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./3">3</A><A href="./3"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./4">4</A><A href="./4"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./5">5</A><A href="./5"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./6">6</A><A href="./6"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./7">7</A><A href="./7"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
</TR>
<TR>
<TD align="center"><A href="./8">8</A><A href="./8"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./9">9</A><A href="./9"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./10">10</A><A href="./10"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./11">11</A><A href="./11"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./12">12</A><A href="./12"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./13">13</A><A href="./13"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./14">14</A><A href="./14"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
</TR>
<TR>
<TD align="center"><A href="./15">15</A><A href="./15"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./16">16</A><A href="./16"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./17">17</A><A href="./17"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
<TD align="center"><A href="./18">18</A><A href="./18"><IMG alt="" src="1.png" style="border: 0px; margin-top: 5px"></A></TD>
</TR>
</TABLE>
</DIV>
</DIV>

Does anyone know why this problem is occurring?