CSS / Table layout query in IE

[bologne]

Hey,

I'm currently working on a website, an example of which is being shown here:

www.blurrededgemagazine.com/test/indexredone.php

I'm having a layout problem in IE; I have used a combination of CSS and tables to create the "Reviews" section on this front page, however in IE it appears to be pushed down a few pixels lower than the other tables within the parent table.

The code is as follows:

<table style="padding-left:10px; padding-right:10px;" width="890px" align="center" height="659px"><tr><td width="220px"><table id="reviewstable" align="left"><tr><th><a href="sub.php?m=r">Reviews</a></th></tr><?php here?></table></td><td width="21px"></td><td width="380px">
  <table id="articlestable" align="center"><tr><th><a href="sub.php?m=r">Articles</a>
  </th></tr><?php here ?></table></td><td width="18px"></td><td width="220px" valign="top"><table id="blogtable" align="right"><tr><th height="29px"><p align="center">Blog Posts</p></th>
  </tr><tr><td height="201px"><? php here ?></td>
  </tr></table></td></tr></table>

and relevant CSS:

table#reviewstable {
	width:220px;
	height:659px;}
table#reviewstable th {
	background:url(images2/cellpic3.gif) top left repeat-x;
	width:220px;
	height:29px;}
table#reviewstable td {
text-align:center;
vertical-align:text-top;
width:220px;
height:210px;
padding-top:10px;}
table#articlestable {
	width:380px;
	height:659px;
}
table#articlestable th {
	background:url(images2/cellpic3.gif) top left repeat-x;
	width:380px;
	height:29px;
}
table#articlestable td {
text-align:center;
vertical-align:text-top;
width:380px;
height:210px;
padding-top:10px;}

table#blogtable {
	width:220px;
	height:230px;
}
table#blogtable th {
	background:url(images2/cellpic3.gif) top left repeat-x;
	height:29px;
}
table#blogtable td {
height:201px;
text-align:center;
vertical-align:text-top;
padding-top:10px;}

Any ideas as to what could cause this would be great. It's been driving me crazy tonight.

Regards

[Fisher]

You have an "expanding box" problem there somewhere, but I'm not exactly sure where.

So much of that code is not supported in IE6 and that's what I'm using to view it.

A quick and dirty solution would be to add this to your CSS:

<!--[if IE]>
<style type="text/css"
table#reviewstable td {
	height:213px;
}
<![endif]-->

It raises the bar up. Not sure if that'll affect your image alignments though.