Force flash to play below dhtml menu?

Hi all,

I have a .swf files which runs next to a flyout menu. When the menu flies out, unfortunately it appears behind the flash movie, effectively ruining my navigation.

Is there a way to force the flash movie to play below the menu, or a way to declare the dhtml to load on top of everything else within the document, or will flash always play on top?


I had similar problems too… couldn’t find an answer then, but does anyone know if z-index in CSS would work for this?

When I first learned about z-index’s, that was the first thing I thought of, but I never tried it out…

figured it out…

change the window mode to transparent Windowless in the Publish Settings and resave the movie. Grab the new flash code for the movie.

Then, throw this div tage around your flash code in the HTML Document:

<DIV ID=“flashMovie” STYLE=“width: 400; height: 180; z-index: 0;”>
flashcode here

swap out the appropriate width and height dimensions for your movie.

Worked for me!

And I’m sticking this thread, since it comes up so often in discussions related to Flash, DHTML, and CSS.

actually… more specifically -

Here is the easiest way of doing it. Just add wmode=“transparent” as a param and to the embed tag.

Like this:

[B]<param name="wmode" value="transparent" />[/B]
<EMBED src="swf.swf" quality=best bgcolor=#FFFFFF [B]wmode="transparent"[/B] WIDTH="550" ...

this works

.FlashContent {
z-index: 3;

.NavContent {
z-index: 1;


----the dhtml nav-----------

<SCRIPT language=JavaScript src=“defaultMenu.js” type=text/javascript STYLE=“display: block; position: absolute;
top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 100;”></SCRIPT>

----the embedded flash------

<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“,0,29,0” width=“765” height=“205” STYLE=“display: block; position: absolute;
top: 102px; right: 0px; left: 0px; z-index: 1;”>
<PARAM NAME=“wmode” value=“transparent”>
<param name=“movie” value=“home.swf”>
<param name=“quality” value=“high”>
<embed src=“home.swf” quality=“high” pluginspage=“” type=“application/x-shockwave-flash” width=“765” height=“205”></embed></object>

I did this for a site a while back, the client has since mangled my work, but you can still see the DHTML over flash example here

This is the partial answer: it fails in Mozilla (Firefox and Mozilla 1.5) and Opera (and the dhtml menu scrunches up in Opera). I haven’t tried any other browsers, but gather it’s only good for IE.

It’s an annoyance…

I am having this problem too, and all the recommendations failed to work for me…

I did this for a site a while back, the client has since mangled my work, but you can still see the DHTML over flash example here

:bawling: thats so aweful vanillaorange, i have yet to learn DHTML coding lolol but thats an awesome effect.

I’ve been playing with some transparent Flash via WMODE and found that it works great in most Mac and Windows browsers except Firefox (0.9.x) on MacOS X. Although the transparency comes through, the Flash content is thrown to the bottom of the page. I wonder if this is due to a problem in Firefox or in my code. I would appreciate hearing the thoughts of you Flash Transparency experts out there.


Hi… Just thought I’d mention that after much research in the MM tech notes, on Google and finally, with an MM engineer, I wrote up a free article about this last week. It’s not actually neccessary to use wmode transarent… for most purposes wmode opaque works better since the rendering in that mode is quicker.

If you’d like to read the whole article (include a mention of hiding non-essential Flash “decoration” from screen readers using the same method) it’s here:

Hope it helps somebody!

Nice one Steph :slight_smile:

Thanks Steve. Long time no see. :wink:

I have just implemented some drop down menus, and used the above discussed method to get the menus over flash. It worked fine on my computer, and on most of the test machines, but another user has reported it doesn’t on his.

And here’s the really confusing part: this user has the exact same version of IE, with the exact same version of flash, running on the very same version of windows (IE 6.0.2800.1106 with Flash 7,0,19,0 on Win2000 - he also experienced the same problem on an XP machine).

Anyone have a clue what could be causing this?



I like yr drop menu… Can you provide the code for it ??


Good stuff - thanks


I’ve tried everything and still flash hides the dhtml menu in firefox 1.1
It works great in ie but not in firefox.
I’m tried using the wmode opaque and transperent and using z-index but nothing works…I’m desperate.



Sorry, Almost forgot here’s a the link to see:

thanks again