Table Cell expanding by itself!

Hi! I am working on this design, but I can’t even get the basics going: really strange behaviour.

This is my html page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
   html, body{
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   }
</style>

</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<table width="100%"  border="0" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td bgcolor="#E5E5E5">&nbsp;</td>
    <td width="253">&nbsp;</td>
    <td bgcolor="#E5E5E5">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#726E67" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#B1B0A8">&nbsp;</td>
    <td width="253" bgcolor="#E5E5E5">&nbsp;</td>
    <td bgcolor="#B1B0A8">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Now, the problem is, the center stripe that goes across the middle, horizontally, I need to put content in there, that should be 261 pixels high, but if I put an image in there thats 261px high, then the whole center band stretches completely! I don’t understand why it’s doing that! I can’t seem to find another way around it…

Any ideas you table wizards? C:-)

PS: you can see what I mean exactly if you just make the height of that middle cell 261px and the whole thing blows out of proportion…