toolman Posted March 29, 2011 Share Posted March 29, 2011 Hi, I have a drop down menu which is appearing under some flash. I have given my flash a div wrapper with a z-index of 1 and give the embed a wmode of transparent. I have given my <ul> and <li>'s a z-index of 1000, but still it appears under the flash in Chrome and IE, Any ideas? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/232071-flash-appearing-on-top-of-div-chrome-and-ie/ Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 can you show us the (complete)code , rightclick view source copy paste or even better... link to an online example. by the way did you position the elements? z-index wont work if you don't position them: http://www.w3.org/TR/CSS2/visuren.html#z-index Quote Link to comment https://forums.phpfreaks.com/topic/232071-flash-appearing-on-top-of-div-chrome-and-ie/#findComment-1193740 Share on other sites More sharing options...
toolman Posted March 29, 2011 Author Share Posted March 29, 2011 Sure: <ul style="z-index: 100000; position: relative; float: left" id="MenuBar1" class="MenuBarHorizontal"> <li><a href="index.html">Home</a> </li> <li><a href="about.html" class="MenuBarItemSubmenu"><em>About</em></a> <ul> <li><a href="about.html" class="MenuBarItemSubmenu"><em>About</em></a> <li><a href="about.html" class="MenuBarItemSubmenu"><em>About</em></a> <li><a href="about.html" class="MenuBarItemSubmenu"><em>About</em></a> <li><a href="about.html" class="MenuBarItemSubmenu"><em>About</em></a> </ul> </li> </ul> <div style="z-index: 1!important; position: relative"> <object style="z-index: 1!important; position: relative" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="220" align="left" title="Training slideshow"> <param name="movie" value="images/Index/file.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="images/Index/file.swf" width="300" height="220" align="right" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed> </object> </div> Quote Link to comment https://forums.phpfreaks.com/topic/232071-flash-appearing-on-top-of-div-chrome-and-ie/#findComment-1193750 Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 other than in the php and javascript forum, online examples of what you are doing are more useful. besides that the above is not the result of right click view source copy past, but arbitrary selecting. you maybe want to have a look here: http://www.webdeveloper.com/forum/showthread.php?t=130334 the bottom post is sufficient. and the w3c page I linked in the post above here. Quote Link to comment https://forums.phpfreaks.com/topic/232071-flash-appearing-on-top-of-div-chrome-and-ie/#findComment-1193755 Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 try this out, i just tested it and it works in firefox chrome and IE Notice though Chrome and IE need something special, as far as I know: chrome needs inside embed wmode="opaque" IE needs: <param name="wmode" value="opaque" /> this is what a right click view source looks like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>FLASH stuff</title> <style type="text/css"> #wrapper{ background:#cccccc; width:960px; margin:0 auto; text-align: center; color:#fff; position: relative; z-index: 0; } .swfcontainer{ width:640px; height:425px; margin:0 auto; position:relative; z-index: 1; } #one,#two,#three{ width:960px; height:50px; position:absolute; z-index: 10; } #one{ top:100px; background:red; } #two{ top:200px; background:green; } #three{ top:300px; background:#f4a; } </style> </head> <body> <div id="wrapper"> <div class="swfcontainer"> <object width="550" height="400" id="flashfile" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="http://www.flasheezy.com/previews/HolidayEcard/holidayecard.swf" name="movie" /> <param value="high" name="quality" /> <param value="never" name="allowScriptAccess" /> <param value="never" name="allowNetworking" /> <param name="wmode" value="opaque" /> <embed width="640" height="425" wmode="opaque" align="" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="flashfile" quality="high" allownetworking="never" allowscriptaccess="never" src="http://www.flasheezy.com/previews/HolidayEcard/holidayecard.swf"> </object> </div> <div id="one"><h1>this is div #one</h1></div> <div id="two"><h1>this is div #two</h1></div> <div id="three"><h1>this is div #three</h1></div> </div> </body> </html> Hope this helps! Cssfreakie. edit: I changed the code a tiny little 19:30 Quote Link to comment https://forums.phpfreaks.com/topic/232071-flash-appearing-on-top-of-div-chrome-and-ie/#findComment-1193776 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.