I'm trying to position an iframe on top of an image. I use Macromedia Fireworks to create the image, and have been designing pages so that the iframe goes on top of the image for ages now. However, for some reason, it's not working with this layout! I've used the same code, nothing has changed. The iframe always ends up at either the top or bottom of the image. Help is much appreciated, I've been playing with this for hours, it's very frustrating!

The other thing is, I'd like to be able to center the layout and have the iframe in the center (the white space of the layout) and not have it move around when the window re-sizes. How does this work?

Thank you!

http://extendedjazz.horse-heroes.net/foxwoodeeventing

For easy viewing, here's the HTML with the iframe in bold:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::Foxwoode Eventing:: Middleburg, Virginia</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks 8 Dreamweaver 8 target. Created Tue Jun 05 20:09:24 GMT-0400 (Eastern Daylight Time) 2007-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body bgcolor="#000000" onload="MM_preloadImages('index_r2_c2_f2.jpg','index_r3_c4_f2.jpg','index_r3_c6_f2.jpg','index_r3_c8 _f2.jpg','index_r3_c10_f2.jpg');">
<table border="0" cellpadding="0" cellspacing="0" width="700">
<!-- fwtable fwsrc="Untitled-1i.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "93926194" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="186" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="154" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="125" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="17" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="92" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="index_r1_c1" src="index_r1_c1.jpg" width="700" height="477" border="0" id="index_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="477" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="index_r2_c1" src="index_r2_c1.jpg" width="14" height="23" border="0" id="index_r2_c1" alt="" /></td>
<td rowspan="2"><a href="iframe.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r2_c2','','index_r2_c2_f2.jpg',1);"><img name="index_r2_c2" src="index_r2_c2.jpg" width="42" height="15" border="0" id="index_r2_c2" alt="" /></a></td>
<td colspan="9"><img name="index_r2_c3" src="index_r2_c3.jpg" width="644" height="2" border="0" id="index_r2_c3" alt="" /></td>
<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="index_r3_c3" src="index_r3_c3.jpg" width="15" height="21" border="0" id="index_r3_c3" alt="" /></td>
<td rowspan="2"><a href="fet.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c4','','index_r3_c4_f2.jpg',1);"><img name="index_r3_c4" src="index_r3_c4.jpg" width="186" height="15" border="0" id="index_r3_c4" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c5" src="index_r3_c5.jpg" width="13" height="21" border="0" id="index_r3_c5" alt="" /></td>
<td rowspan="2"><a href="comp.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c6','','index_r3_c6_f2.jpg',1);"><img name="index_r3_c6" src="index_r3_c6.jpg" width="154" height="15" border="0" id="index_r3_c6" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c7" src="index_r3_c7.jpg" width="14" height="21" border="0" id="index_r3_c7" alt="" /></td>
<td rowspan="2"><a href="training.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c8','','index_r3_c8_f2.jpg',1);"><img name="index_r3_c8" src="index_r3_c8.jpg" width="125" height="15" border="0" id="index_r3_c8" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c9" src="index_r3_c9.jpg" width="17" height="21" border="0" id="index_r3_c9" alt="" /></td>
<td><a href="horsetrials.html" target="if" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c10','','index_r3_c10_f2.jpg',1);"><img name="index_r3_c10" src="index_r3_c10.jpg" width="92" height="13" border="0" id="index_r3_c10" alt="" /></a></td>
<td rowspan="3"><img name="index_r3_c11" src="index_r3_c11.jpg" width="28" height="21" border="0" id="index_r3_c11" alt="" /></td>
<td><img src="spacer.gif" width="1" height="13" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="index_r4_c2" src="index_r4_c2.jpg" width="42" height="8" border="0" id="index_r4_c2" alt="" /></td>
<td rowspan="2"><img name="index_r4_c10" src="index_r4_c10.jpg" width="92" height="8" border="0" id="index_r4_c10" alt="" /></td>
<td><img src="spacer.gif" width="1" height="2" border="0" alt="" /></td>o
</tr>
<tr>
<td><img name="index_r5_c4" src="index_r5_c4.jpg" width="186" height="6" border="0" id="index_r5_c4" alt="" /></td>
<td><img name="index_r5_c6" src="index_r5_c6.jpg" width="154" height="6" border="0" id="index_r5_c6" alt="" /></td>
<td><img name="index_r5_c8" src="index_r5_c8.jpg" width="125" height="6" border="0" id="index_r5_c8" alt="" /></td>
<td><img src="spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
</table>
<div style="position: absolute; left:363; top: 10; width: 480; height: 106; border: 0px solid; color: 264B78; overflow: none;=";">
<iframe src="iframe.html" name="if" FRAMEBORDER="0" width="465" height="394" scrolling=auto allowtransparency="true" background-color="transparent"></iframe>
</body>
</html>