
Mar 30th, 2008, 15:13
|
|
New Member
|
|
Join Date: Mar 2008
Location: London, UK
Age: 25
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
Flash Divs overlap problem
I´ve inserted a Flash image gallery on a div (#imagegallery), and the others divs are supposed to overlap part of it using z-index. In Mac (Safari3, Firefox3 and Opera9.2) everything works fine but in Windows (Firefox2 and IE7) the Flash div overlaps all others, disregarding z-index. Weirdly, if I remove the Flash Gallery everything works as it should. Any ideas? I´ve removed all the content and set bright colours to the backgrounds as a way to see things clearly in order to fix the problem in case you were wondering. Thanks.
- Code: Select all
Head
<style type="text/css">
#content {
width: 900px;
height: 600px;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #33FF33;
z-index: 1;
overflow: hidden;
}
#top {
position: relative;
width: 900px;
height: 140px;
margin: 0 auto;
text-align: left;
background-color: #FF0000;
z-index: 2;
}
#leftmenu {
width: 200px;
height: 200px;
text-align: left;
position: absolute;
float:left;
background-color: #FFFF00;
top: 120px;
z-index: 3;
}
#imagegallery {
width: 800px;
height: 600px;
float: right;
position: relative;
background-color: #0000FF;
top: -50px;
left:30px;
z-index: 1;
}
</style>
Body
<body>
<div id="content">
<div id="top"></div>
<div id="imagegallery">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','20','height','30','src','viewer','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','viewer' ); //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,28,0" width="20" height="30">
<param name="movie" value="viewer.swf" />
<param name="quality" value="high" />
<embed src="viewer.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="20" height="30"></embed>
</object>
</noscript></div>
<div id="leftmenu">Content for id "leftmenu" Goes Here</div>
</div>
</body>
</html>
Last edited by saltedm8; Mar 30th, 2008 at 15:49.
Reason: added [code] blocks
|