Layer distorting table

[simes1972]

Hi all,

I'm trying to put a table on top of another table, so that the cells overlap.

What's happening though is that the table in the layer, is changing the size of the parent table, as if it wasn't in a layer.

The html that's causing the problem goes something like this:

<table>
<tr>
<td><img src='flower1.jpg' width=60 height=60></td>
<td><img src='flower2.jpg' width=60 height=60></td>
</tr>
<tr>
<td><img src='flower3.jpg' width=60 height=60></td>
<td>
<div style="position:relative; top:-30; left:-30; z-index:3;">
<table cellpadding=0 cellspacing=0 border=0>
<tr><td><img src='flower4.jpg' width=40 height=40></td><td><img src='flower5.jpg' width=40 height=40></td></tr>
<tr><td><img src='flower6.jpg' width=40 height=40></td><td><img src='flower7.jpg' width=40 height=40></td></tr>
</table>
</div>
</td>
</tr>
</table>

The above is online here:
http://www.picturesudoku.com/test2.htm

The dynamic page might ilustrate the problem might be clearer here:
http://www.picturesudoku.com/test.htm

I'd be very grateful if anyone can point me towards a solution to stop resizing the table.

Thanks,
Simon

[KDLA]

You've nested the layer table within the parent table. Make them two separate entities.

[simes1972]

Hi KDLA,

Thanks for your help, but how do I then position it to be relative to the table cell where the code currently resides?

Sorry for my ignorance - I've resisted layers for too long.

Best Wishes,
Simon

[KDLA]

Use absolute positioning for the parent table, also; same coordinates.

[simes1972]

Thanks, but I can't do that - it's a javascript thing that third parties can put on their sites.

Unless anyone has a better idea, what I'll do is get the position of the table cell and place the 2nd table at those coordinates.