flash content such as the one output by video module or flash gallery module overlaps the drop down menu created by nice menus. as far as i could see it happens both on firefox and safari.

i tried to change other modules' css adding position and z-index to the div like this:
{position: relative; z-index: -1;}
but to no avail.

(the nice menu drop-down is positioned and has a higher z-index).

not sure this is a nice_menus problem, but still it compromises its functionality.
thank you very much for any help.

Comments

Zach Harkey’s picture

Zach Harkey CreditAttribution: Zach Harkey commented

Usually, to get force flash movies to display underneath css dropdowns, the magic bullet seems to be explicitly setting the flash movie's window mode (WMODE) to "transparent" or, in some situations to "opaque" (i.e. wmode="transparent" or wmode="opaque").

Here's a tech note:
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523

And here's a real good explanation:
http://www.communitymx.com/content/article.cfm?cid=E5141

-zach

vthirteen’s picture

vthirteen CreditAttribution: vthirteen commented

thanks, that helped but did not actually solve the problem.
now i can see the background behind the flash object as much as there is no active object in it. problem is that where there is some active object (such a video), everything else (my drop down menu in this case) falls behind flash.

gateone’s picture

gateone CreditAttribution: gateone commented

Unfortunately, this is browser-plug-in related in general and not a Nice Menus issue. Flash will ALWAYS be displayed in front of ANYTHING on the site. There is technically no way to circumvent this. You will find this problem on many many live pages by the way. As general advice: avoid touching flash content with DIVs that are supposed to lay on top of the flash content. This is simply impossible, sadly...

Patrick Nelson’s picture

Patrick Nelson CreditAttribution: Patrick Nelson commented

Zach's suggestion works fine for me on http://www.vcommunity.org.uk both in Firefox (1.5.07) and IE7. Don't know about IE6 though.

If there are still problems with FF, this might help: http://www.quantumslip.com/archives/2006/09/flash_wmode_scr.html

add1sun’s picture

add1sun CreditAttribution: add1sun commented
Component: User interface » Miscellaneous

not a nice menu problem. closing old issues

add1sun’s picture

add1sun CreditAttribution: add1sun commented
Status: Active » Closed (won't fix)

Grrr, forgot to actually close it. ;)

Zoologico’s picture

Zoologico CreditAttribution: Zoologico commented

WMODE="TRANSPARENT" worked for me in IE7 and FF2.

At first, what FLASH spit out for code wasn't well received by Dreamweaver (weird) which read that it wouldn't work well in latest version of IE. Dreamweaver then offered to fix it for me (how nice).

BEFORE (what FLASH generated):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>urfront2</title>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="180" id="urfront2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="urfront2.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="urfront2.swf" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="180" name="urfront2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

AFTER (fixed by DREAMWEAVER):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>urfront2</title>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','550','height','180','id','urfront2','align','middle','src','urfront2','menu','false','quality','high','wmode','transparent','bgcolor','#ffffff','name','urfront2','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','urfront2' ); //end AC code
</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="180" id="urfront2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="urfront2.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="urfront2.swf" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="180" name="urfront2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></noscript>
</body>
</html>

However, I only used this to make it work:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="180" id="urfront2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="urfront2.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="urfront2.swf" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="180" name="urfront2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
yopyop’s picture

yopyop CreditAttribution: yopyop commented

Fantastic, you saved a site I was working on with Flash Headers!

thomasmurphy’s picture

thomasmurphy CreditAttribution: thomasmurphy commented

I've got this to work in opaque window mode, not with nice menus but just to say to can get around this problem with drop down menus and flash in general. I'm using the flash object browser detect script http://blog.deconcept.com/flashobject/

kssundar’s picture

kssundar CreditAttribution: kssundar commented

Did not work for me - I used ur code above and changed the url of the flash content. The flash is displaying properly but the nice menu is dropping behind the flash content. Please help me.
Here's my code - Input format is php code - I use Drupal 5.7 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/drupal/files/u1/skinfitness.swf" width="550" height="180" id="urfront2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/drupal/files/u1/skinfitness.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="/drupal/files/u1/skinfitness.swf" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="180" name="urfront2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

I tried both the transparent and the opaque option. But of no use. Please help!!

tanfastic006’s picture

tanfastic006 CreditAttribution: tanfastic006 commented

you got to set wmode as transparent not in one place but two.

set is as param name value
< param value="transparent" name="wmode" />

and again where you embed

< embed width="800" height="400" src="something.swf" name="" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" type="application/x-shockwave-flash">< / embed>

works fine in my site http://munia.pragyadhi.com check

This is actually not a nice menu issue,rather its a flash issue. Flash objects are like opaque stickers over a webpage.It will cover anything beneath it,unless we make it(the flash) transparent.

johnhanley’s picture

johnhanley CreditAttribution: johnhanley commented

tanfastic006,

Thanks so much for your post. This Flash object transparency issue had me stumped (i.e. worked in IE, but not FF), but adding the param to the embed did the trick.

Cheers,
John

mcfilms’s picture

mcfilms CreditAttribution: mcfilms commented

Zach, Zoo, et al.

Thank you. You solved my issue. Good job.

dssummers’s picture

dssummers CreditAttribution: dssummers commented

Z-index is only effective if the div's position is set to absolute. You can place a transparent flash file or swf behind, in the middle, or on top of any site in almost every version of every browser using this method, but the div's position MUST be absolute

ChristianP’s picture

ChristianP CreditAttribution: ChristianP commented

Just wanted to drop my point of view on this as well!

This worked for me:

<object height="550" width="400">
<param value="your_flash.swf" name="movie">
<embed height="550" width="400" wmode="opaque" src="your_flash.swf">
<param value="opaque" name="wmode">
</object>

Notice the "opaque" attribute. And it's also good to set z-index: 1 and position:relative on the "object" tag, and z-index: 2 or more on the menus.

chopper72’s picture

chopper72 CreditAttribution: chopper72 commented

I Just wanted that after ages trying to figure this out, the following (which is similar to most of the above) worked for me:
BUT DON'T FORGET TO RUN CRON TO REFRESH THE SITE VIEW (i couldn't figure out why the flash fix was not working. remember... CRON!!!!)

<div id="headerimg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="978" height="250">
	<param name="movie" value="themes/tcc/flash/ManualHeader.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="opaque" />	
<embed src="themes/tcc/flash/ManualHeader.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="opaque"  type="application/x-shockwave-flash" width="978" height="250"></embed>
    </object>
</div>
lmmac’s picture

lmmac CreditAttribution: lmmac commented
Version: 6.x-1.2 » 4.7.x-1.x-dev

i cant view the sublinks in nice menu due to the slideshow displayed on the top. can anyone suggest any idea to override this problem. my version is 6.12

lmmac’s picture

lmmac CreditAttribution: lmmac commented
Title: flash modules overlap nice menus drop down (not just in IE) » slideshow modules overlap nice menus drop down (not just in IE)
Version: 4.7.x-1.x-dev » 6.x-1.2
Priority: Normal » Critical

i cant view the sublinks in nice menu due to the slideshow displayed on the top. can anyone suggest any idea to override this problem.