table/td height problems with IE

[yogi4270]

Hi, this is my first post. Im having a terrible time trying to design a table with 3 columns and 2 rows. Row1[column1] and row1[column3] are images of fixed height. Row1[column2] (in the middle) will span both rows and be text of variable length extending beyond the images on either side. In row2[column1] and row2[column3] I have images of equal width to the images above them, but 1px in height. I wanted these images to act as 'fillers', extending down the page as long as the content in the middle cell. Here is what i have:

<table cellpadding="0" cellspacing="0" border="0">
<tr><td valign="top" width="153" align="left" height="499"><img src="images/l_border_orange_sports.jpg"></td>
<td rowspan="2" width="447"><-- Text of variable height--></td>
<td valign="top" width="153" align="right" height="499"><img src="images/brick_ivy.jpg"></td>
</tr>
<tr valign="top">
<td valign="top" height="100%" background="images/l_bkgd_orange.jpg"></td>
<td valign="top" background="images/r_bkgd_green.jpg" ></td>
</tr>
</table>

Any help would be much appreciated. Thx.

[londrum]

you can get the same thing with just one row, and it will be easier for you as well because there will be less code. just put those background images (that you currently have on row 2) on row 1, cols 1 and 3 instead. it will sit behind the image that you put in the cell.

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align: top; width: 153px; background: url(images/l_bkgd_orange.jpg) bottom center;">
<img src="images/l_border_orange_sports.jpg">
</td>
<td style="width: 447px;">
<-- Text of variable height-->
</td>
<td style="vertical-align: top; width: 153px; background: url(images/r_bkgd_green.jpg) bottom center;">
<img src="images/brick_ivy.jpg">
</td>
</tr>
</table>