I have a layout (built in Photoshop and sliced) and I used the main slices as background for my flash movies and then I embed the flash in the layout to provide seemless integration. This worked for the menu, but it didn’t work for the main spots. Here is my code:
<table id="Table_01" width="100%" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="8" width="*">
<!--background="images/Jsites_01.gif"<img src="images/Jsites_01.gif" width="198" height="600" alt="">--></td>
<td rowspan="8" width="13">
<img src="images/Jsites_02.gif" width="13" height="600" alt=""></td>
<td width="427" height="41">
<embed src="menu.swf" width="427" height="41"></embed></td>
<td rowspan="8" width="14">
<img src="images/Jsites_12.gif" width="14" height="600" alt=""></td>
<td rowspan="8" width="*">
<!-- background="images/Jsites_13.gif"<img src="images/Jsites_13.gif" width="148" height="600" alt="">--></td>
</tr>
<tr>
<td width="427">
<img src="images/Jsites_14.gif" width="427" height="9" alt=""></td>
</tr>
<tr>
<td width="427">
<img src="images/Jsites_15.gif" width="427" height="16" alt=""></td>
</tr>
<tr>
<td width="427" height="222">
<embed src="main_top.swf" width="427" height="222"></embed>
</td>
</tr>
<tr>
<td width="427">
<img src="images/Jsites_17.gif" width="427" height="16" alt=""></td>
</tr>
<tr>
<td width="427">
<img src="images/Jsites_18.gif" width="427" height="5" alt=""></td>
</tr>
<tr>
<td width="427" height="241">
<embed src="main_bottom.swf" width="427" height="241"></embed>
</td>
</tr>
<tr>
<td width="427">
<img src="images/Jsites_20.gif" width="427" height="50" alt=""></td>
</tr>
</table>
The problems lie in the
<embed src="main_bottom.swf" width="427" height="241"></embed>
and
<embed src="main_top.swf" width="427" height="222"></embed>
tags. It’s always vertically off by a few pixels and this disturbs the whole layout. If you look near the top you can see I did it with the menu and that works fine. See it in action: http://jsites.no-ip.com Any ideas?