Table problem :o

Ok, the image below is part of a layout im creating. But i cant figure out why the tables are being stupid! -cri

Ok, so heres the set up, left [blue box] is one table, middle is an iframe in another table, and to the right [blue box] is another. For some reason, theres a gap at the top of the blue boxes, but not in the iframe table. They are all tables inside a table btw. Please help?

http://habblefm.com/images/mystery.png

Heres the code:

Show Hide

Code:

---

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>
  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>
  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>
 
          </table>

</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<iframe src="http://habblefm.com/v2/pages/home.html" frameborder="0" height="500" width="500"></iframe></div>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>

  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>

  <tr>
          <td>
    <div id="content_container">
          <div id="content_top"></div>
          <div id="content_mid"><br><br><br><br><br></div>
          <div id="content_bot"></div>
          </div>
  </tr>
         
          </td><br>
</table>
</td>
</tr>
</table>

---

and the CSS [just the content CSS]:

Code:

---

#content_container {
  width: 177px;
}
 
 
#content_top {
  background-image: url(images/content_top.png);
  height: 23px;
}
#content_mid {
  background-image: url(images/content_mid.png);
}
#content_bot {
  background-image: url(images/content_bot.png);
  height: 4px;
}

---

er valign=top maybe?

I tried that, im not exactly sure which part of the code to put it on. I also tried to change the height of the table, but that made the space between the other blue boxes under it, bigger.

Maybe its coz of the <br><br><br> in the mid div..................

No, i got rid of that, its suppose to be there, because the Divs expand

Right sorry, if i correct for you you won't learn. Basically you have closed the </td> tag after the </tr>

I wouldn't have coded the layout like that..