Table problem :o

[DJ::Beatz]

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:



<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]:


#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;
}

[Jackboy]

er valign=top maybe?

[DJ::Beatz]

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.

[Jackboy]

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

[DJ::Beatz]

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

[Jackboy]

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..