Dropdown behind the Flash with swfObject

Forum Moderators: open

Message Too Old, No Replies

Dropdown behind the Flash with swfObject

Haico

1:09 pm on Jan 18, 2007 (gmt 0)

I built a site with an DIV-dropdown menu and just below it a Flash animation. I used the swfObject for the Flash.
The Menu appears behind the Flash in Firefox. It appears above the Flash in IE7/IE6.

I tried the so.addParam("wmode", "transparent"); but that also didn't work out.

Someone an idea?

Chaz_McGaz

3:24 pm on Jan 19, 2007 (gmt 0)

I've had this problem a couple of times. CSS dropdowns are great for, amongst other things, seo purposes and when they overlap an SWF they clash.

I tried the transparent wmode without success.

Layering the dropdown menu above the swf using the css z-index is one thing. But the dropdown interferes with the animation.

I tried a couple of javascript dropdowns but they didn't stop the clash between menu and swf.

On the first occasion I redesigned the site so that there was a space for the dropdown...as a compromise it looked fine.

I'm working on something right now where it was decided that the dropdown menu background needs to be half transparent so that the slideshow behind was still visible. The best results were achieved by building the menu and slideshow together in flash.

I'm sorry this is not a solution. hopefully someones got an answer.

Scrambles

11:15 pm on Mar 12, 2007 (gmt 0)

I found a combination of other techniques worked.

In the javascript used to insert the swfObject, add:
so.addParam("wmode", "transparent");
just before the so.write();

Also, set this CSS for the DIV that is to contain your flash file (e.g. swfDiv)
#swfDiv { position: absolute; z-index: 0; }
This is assuming your CSS drop-down menu has a z-index higher than 0.

This has been tested in IE5.5,IE6,IE7 and Firefox 2.0. Not tested on any other browsers, sorry.

-Scrambles-

[edited by: encyclo at 1:53 am (utc) on Mar. 13, 2007]
[edit reason] thread splice [/edit]