Forum Moderators: open
I have a problem with displaying table cells correctly in ie7 - works in Firefox. I have a row with three cells - left cell is fixed width, right cell is fixed width and middle has no width, so that it should stretch with browser resolution to allow left and right cells to display at left and right of browser. However, in ie7 the right cell does not display at right - in other words, middle cell does not stretch. Code of table (top row is the problem) is:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="106" id="logo"> </td>
<td class="header"> </td>
<td width="260" align="right" class="header"><script type="text/javascript" src="slide.js"></script></td>
</tr>
<tr>
<td height="34" id="topleft"> </td>
<td colspan="2" align="center" valign="middle">
<p class="date">Welcome to The Old Mill on
<script type="text/javascript" src="date.js"></script> </p>
</td>
</tr>
</table>
In css file the relevant info is:
body {background:#ECE9D8; margin:0px;}
.header {background-image:url("images/header-bg.jpg"); background-repeat:repeat-x;}
#topleft {background-image:url("images/top-left.gif"); background-repeat:no-repeat;}
The two scripts are simple slideshow and display date scripts.
Is there some simple error here that I'm missing? Can't figure out why middle cell won't stretch!
Still don't understand why the first version doesn't work, though.
Solution code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="106" id="logo"> </td>
<td align="right" class="header"><script type="text/javascript" src="slide.js"></script></td>
</tr>
<tr>
<td height="34" id="topleft"> </td>
<td align="center" valign="middle">
<p class="date">Welcome to The Old Mill on
<script type="text/javascript" src="date.js"></script> </p>
</td>
</tr>
</table>
