hi all, I am using flash to display background images (rotating) and it usually displays divs above the flash.
Now since Safari has been updated it's decided to display the flash above everything, instead of everything else above the flash.. http://www.souliejolie.com/2010/home
It works in all other browsers except for Safari 4(.0.3) - It was also working (and still works fine) in safari 3.2.2.
I was wondering if anyone knows how to fix it?
Here's my flash code:
<div class="bg">
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','name','randomPic','width','100%','height','100%','align','middle','id','randomPic','src','/2010/modules/mod_flash/assets/bg','quality','high','allowscriptaccess','sameDomain','allowfullscreen','true','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','/2010/modules/mod_flash/assets/bg' ); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="randomPic" width="100%" height="100%" align="middle" id="randomPic">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="/2010/modules/mod_flash/assets/bg.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="/2010/modules/mod_flash/assets/bg.swf" width="100%" height="100%" align="middle" quality="high" name="randomPic" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
</object>
</noscript>
</div>
Here's my css:
body, td, th {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: justify;
color: #464646;
}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
overflow: hidden;
}
.bg {
z-index: -1;
}
div#pageContainer {
position:absolute;
top:0px;
display:block;
width:100%;
height:100%;
overflow:auto;
z-index: 1;
}
If someone can help me out, that'd be great.. :)