When I try the code below, hiding the overflow doesn’t work (it expands):
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1024" height="100" colspan="3"> </td>
</tr>
<tr><td width="1024">
<div style="width:1024;height:436;overflow:hidden;">
<div style="position:absolute;">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td width="51"><img src="images/page1_04.jpg" width="51" height="436" /></td>
<td width="922" height="437"><img src="images/page1_05.jpg" width="922" height="436" /></td>
<td width="51"><img src="images/page1_06.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page1_arrow_hover_06.jpg'" onMouseOut="this.src='images/page1_06.jpg'" /></td>
<td width="300"><img src="images/page2_05.jpg" /></td>
<td width="51"><img src="images/page2_04.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page2_arrow_hover_04.jpg'" onMouseOut="this.src='images/page2_04.jpg'" /></td>
<td width="922" height="437"><img src="images/page2_05.jpg" width="922" height="436" /></td>
<td width="51"><img src="images/page2_06.jpg" width="51" height="436" /></td>
</tr></table>
</div>
</div>
</td>
</tr>
</table>
However, when I use only a fragment of the code (the parent div) it works fine.
What am I doing wrong?
Thank you in advance,
Mark.
You need to set style with
table-layout:fixed; along with overflow:hidden;on the table element.