Cannot get CSS Drop-Down above Flash File

Question

I have searched everything and tried every method I can get my hands on and cannot get my CSS drop-down menus to display above my Flash file.

You can go to: http://beta.riverlifefellowship.com and username is 'riverlife' and password is 'flow' (without the quotes on both).

I am using swfObject and have the <param name="flashvars" value="wmode=opaque"/> set. The div around the drop down is absolute position with z-index of 9999 and the div around the flash file is relative position with z-index of -1

Any suggestions of things to try is greatly appreciated!

[Note: It is working in all browsers on Mac OS but no browsers on Windows OS]

Answer 1

Set the wmode property on the Flash to transparent - that usually works

EDIT: You are using <object> to embed the .swf - which is one way, but <embed> will work across more browsers and will actually solve the problem for the most part, combined with the wmode you already have set. Adobe Dreamweaver has a nice way of creating some javascript that handles the choice of or <object> based on the browser. But without that your code should basically look like this. (This is tested in Firebug and worked)

<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="980" height="250">
    <param name="movie" value="/files/themes/RiverLife-Oct09/media/header_ssp2.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <embed src="/files/themes/RiverLife-Oct09/media/header_ssp2.swf" quality="high" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="250"></embed>     
    </object>

Answer 2

Did you set the wmode to transparent?

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

Answer 3

Unless you actually need the transparency (i.e., you flash movie has a transparent background), the best choice is to use opaque for the wmode which will have better performance than transparent. Only wmode="window" (which is the default) prevents the browser from drawing on top of the flash.

http://www.communitymx.com/content/article.cfm?cid=e5141

This mode is the one that confused me due to this wording: "Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through." Truth is, since by using wmode="opaque", you've placed the Flash Player directly onto the page, it can now accept placement and positioning like any other element. Unless your viewer is not using a compliant browser (list to follow), the z-index will be respected and rendered. So yes, you can move elements behind Flash movies to prevent them from showing through, but you can just as easily move the elements in front of the Flash movies to prevent the Flash from showing through.

Answer 4

Your drop down menu will work with position: absolute.

Edit: I got a similair case where I also got a dropdown menu at the top and a flash object beneath it. In my case the menu has position: absolute and the flash object wmode="opaque". Maybe it's also worth mentioning that the menu is in a container div with overflow: auto and the flash object as well. This works for me.

Ok let's write this down..

<div id="header">
    <div id="menu"></div>
</div>

<div id="flashContainer">
    <object id=flash"></object>
</div>




#header
{
    overflow: auto;
}
#header #menu
{
    position: absolute;
    top: 2px;
    left: 40px;
}
#flashContainer
{
    overflow: auto;
}
#flash
{
    float: left;
}