Div Embed - z-index help. Options

[sebbywood]

Okay, so I'm trying to get the myspace flash gallery on top of an image... and I cant get it to work. I think I might be doing something really obviously stupid, but can't work it out - so I'm fed up with this code atm.

Anyway...

ABOUT ME:

CODE

<style>td td object {position:absolute; left:38%; top:758px; display:block; width:0px; height:0px;}</style>

<style>
.orangetext15, .navbar, .contacttable {display:none;visibility:hidden;}

div table {background-color:transparent;}
td.text table {visibility:hidden;}
td.text table table, td.text table table td.text {visibility:visible;}
td td td td td div {background-color:transparent;}
td td td td td div strong {visibility:hidden;}
table table table {visibility:hidden;}

body {
background-color:ffffff;
background-image:url('http://farm1.static.flickr.com/210/500360228_52b32c78b6_o.jpg');
}

table, tr, td {background:transparent; border:0px;}
table table table {background-color:transparent;}


input {background-color:transparent !important;}

td, span, div, input, textarea, a, table td div div font,
div table tr td font {font-family:arial !important;}

td, span, div, input, textarea, table td div div font,div table tr td font {
color:000000 !important;
font-size:8pt !important;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:000000 !important; font-size:8pt !important;}

a {color:ffffff !important;text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}

a:hover {color:ff00ff !important; text-decoration:none !important; font-style: normal !important; font-weight: normal !important; text-transform: normal !important; }

img {border:0px;}

.blacktext10 {display:block;}

.vuemusic { position:absolute;
left:50%; top:135px;
width:800px;
height:1250px;
z-index:1;
margin-left:-400px;
padding:0px;
border:0px;
background-color:transparent;}


div.gallery { position:absolute;
left:41px; top:552px;
width:725px; height:300px;
z-index:2;
background-color:transparent;
}

</style>

WHO ID LIKE TO MEET:

CODE

<div class="vuemusic">

<div class="gallery">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="300" width="725" align="middle" data="http://lads.myspace.com/photoshow/slideshow.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/photoshow/slideshow.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="userID=393980091&bgColor=16777215&bgColor2=16777215&transitionSpeed=4&transitionStyle=a&showCaptions=0&albumID=734472" />
</object>
</div>


<img src="http://www.sebbywoodproductions.co.uk/vue/newvue.jpg" width="800" height="1250" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="253,1030,551,1205" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15dnVlLmNvbQ==" />
<area shape="rect" coords="241,1219,569,1235" href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnNlYndoaXRlLmNvLnVr" />
<area shape="rect" coords="557,194,755,343" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0dW5lc2Zlc3RpdmFsLmNvbQ==" />
<area shape="rect" coords="558,368,756,515" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1jZmx5LmNvbQ==" />
<area shape="rect" coords="341,350,401,380" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15dnVlLmNvbS9pdHVuZXMv" />
<area shape="rect" coords="408,353,528,380" href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnRpY2tldG1hc3Rlci5jby51ay9hcnRpc3QvOTY4MTU3" />
</map>

</div>

Can anyone help?

[schizo]

I could be wrong, but I'm pretty sure the higher the z-index, the more towards the top the div is. You have it set to 1 now. Try setting it to 9.