CSS shadow falls behind flash player in Firefox

Question

I want to create a drop-down menu with the css box-shadow tag around it, and I have some content using flash, the problem is when the drop-down menu appears and has a flash drive behind it, box-shadow does not appear. in fact, the shadow box falls over the flash player

I simplify the structure

I am using Firefox 17.0.1, chrome 23.0.1271.97 and flash player 11.5.502.135

Style

.test { position:absolute; z-index: 100; left:50%; top:30px; border:3px solid blue;width:200px; height:200px; background:gray; box-shadow:50px 50px 130px #000} #flash{ position:absolute; left:50%; z-index:-100} 

HTML structure

 <div class="test"></div> <div id="flash"> <object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param value="28bc2_2.swf" name="SRC"> <embed width="100%" height="400" src="28bc2_2.swf"> </object> </div> 

Does anyone know what is happening and the solution, thanks for the help :)

Answer 1

Try adding: -moz-box-shadow: 50px 50px 130px # 000000;

Answer 2

To get the box-shadow cross-browser, you need the following code:

 box-shadow: 50px 50px 130px #000; -webkit-box-shadow: 50px 50px 130px #000; -moz-box-shadow: 50px 50px 130px #000; 

Also try adding the wmode parameter to insert flash:

 <div class="test"></div> <div id="flash"> <object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param value="28bc2_2.swf" name="SRC"> <param value="transparent" name="wmode"> <embed width="100%" height="400" wmode="transparent" src="28bc2_2.swf"> </object> 

Answer 3

In addition to using cross-browser css ... (-moz- and -webkit- like the others mentioned)

Try setting the z-index .test above the z-index of #flash . Also, try putting #flash in a div with the .test class.

Now it seems that you set the z-index of your flash div to -100, and the z-index of your test (is this your menu?) - 100 ... so, naturally, your flash content will be behind .test .