CSS: menu disappears behind flash elements

jonasops · 05-29-2007, 11:44 AM

Hi,

I got such great help here with my last coding problem, so I've got a new problem for you! :-)

http://www.jonasopsal.no/test/index.php?page=home

I want to use a CSS dropdown menu that I have customized slightly (colours mostly) from the stylesheet that came with the CMS I use. It works great, but I have a problem with flash elements that I want to use.

If you put your mouse over "Test" in the menu, you will see the dropdown disappear behind the flash gallery (which by the way, is a sample from another website I'm building so the size and colours are all wrong... :-).

Now... Is there a way to force the CSS to the front, or the flash to the back?

The CSS for the menu can be found here:
http://www.jonasopsal.no/test/uploads/stylesheet.txt

Thanks for any help!

Jonas

StupidScript · 05-29-2007, 03:20 PM

Welcome to the forums, Jonas!

I've never seen Flash relinquish the stage to another player. Even using CSS tricks such as z-index doesn't work ... Flash likes it on top and doggone it, it will stay there! Best advice I'd give is to either (1) make your menus part of the Flash file or (b) move them so they don't git all up in Flash's face. Sorry!

StupidScript · 05-29-2007, 08:13 PM

Okey doke ... From Achernar at another forum*:

Quote:

You have to add a parameter to make the flash object "transparent". This allows elements floating in front to be visible.

Add (for IE):

Code:

<param name="wmode" value="transparent">

and (for other browsers) add the attribute:

Code:

wmode="transparent"

to the <embed> tag.

Code:

<object>
<param name="movie" value="http://....swf">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="http://....swf">
</object>

Please let us know if this works for your situation!

*(Mod: Please PM me for the forum link, if you like ...)

RNK1.com · 05-31-2007, 02:38 AM

I tried what your suggested and it didn't work well why

StupidScript · 05-31-2007, 09:50 AM

I just tested it in both FF2 and IE6 and it works fine for me. Here's the exact code I tested, modified from that posted by Achernar. It doesn't matter if the DIV element is in the code before or after the Flash object:

Code:

<html>
<head>
<script>
var isvis=0;
function showDiv(div) {
 thisdiv=document.getElementById(div);
 if (isvis) { disp="none";isvis=0; }
 else { disp="block";isvis=1; }
 thisdiv.style.display=disp;
}
</script>
<body>
<a href="javascript:void showDiv('thadiv')">Show DIV</a><br />
<div id="thadiv" style="position:absolute; top:20px; left:20px; display:none;">
<a style="color:red;" href="#">Click here text text text text text text text text text text text text text text text text</a>
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
viewastext="" height="89" width="238">
<param name="movie" value="http://www.dargaud.fr/media/tra_media_178.swf">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="http://www.dargaud.fr/media/tra_media_178.swf" height="89" width="238">
</object>
</body>
</html>

jonasops · 05-31-2007, 02:14 PM

Perfect! It works great for my use. Thanks a bunch! :-)

Jonas