Fix: Flash vs CSS Drop Down Menus
If you’ve ever used CSS drop down menus and Flash on the same web page, you may have found out that Flash is always on top of the CSS. Well almost always, there is a fix!
Macromedia has a good tutorial on how to make a Flash movie with a transparent background. It’s quite easy and it allows for CSS drop down menus to drop down on top of a Flash file.
Basically all you have to do is go into the Flash publish settings, to the HTML tab and select ‘Transparent Background’ in the ‘Window Mode’ drop down. (I’m in Flash MX so newer versions of Flash may be sightly different.)
Then publish your file, including the HTML version and use the code in the HTML file when putting it into your web page. The HTML is important as there are a few new tags in the embed code.
It’s quite easy and and works well. For those who think you can just change the z-layer in CSS, well your wrong. Flash doesn’t care about z-layers and all that CSS stuff. It does what it wants. I’m just glad that Macromedia gave us a simple solution.
Hi,
This solution only works on Windows, I’ve tested it on IE 6,7, FF 1.5, Opera 8… but it doesn’t work on my Linux Machinese, and anyone can test it on MAC?
Cheers
- IvaN May 19th, 2006 at 4:41 am
Mozilla Firefox 1.5.0.3 - Windows XP
It works just fine on a Mac. Haven’t tested Linux though.
- Thomas May 19th, 2006 at 5:35 am
Mozilla Firefox 1.5.0.3 - Mac OS X
Hey buddy, I was pulling my hair out trying to get the z-index to pop over a flash file. You saved my proverbial arse! Thanks.
John
- Sire Roydom August 8th, 2007 at 2:43 pm
Safari 419.3 - Mac OS X
Glad to help!
- Thomas August 10th, 2007 at 5:46 am
Mozilla Firefox 2.0.0.5 - Mac OS X
Great, thanks a lot!
And if you will visit Munich, you’ll get some beer
- Jimmy Lightning November 23rd, 2007 at 3:56 pm
Opera 9.24 - Windows XP
I need help. I’ve tried the above approach to fix the problem with CSS drop down menus being hidden by Flash. It works for me in Firefox, but not in Explorer 6.0 or 7.0. Here is the link to the testing page: http://www.ecallis.com/MSFProof/index08-2.html. If anyone can tell me what I’m doing wrong, I’d be glad to buy them a case!
- Linda December 17th, 2007 at 5:15 pm
Mozilla Firefox 2.0.0.7 - Mac OS X
You can achieve a similar result using the ‘wmode’ param - Just add:
to your flash object.
- Web Design Cheshire July 4th, 2008 at 4:53 am
Mozilla Firefox 3.0 - Windows Vista
Sorry, the param code was removed in my above post - I’ll try again:
param name=”wmode” value=”transparent”
- Web Design Cheshire July 4th, 2008 at 4:54 am
Mozilla Firefox 3.0 - Windows Vista
Thanx bra, you made my night EAzzzzy.
- Syla_ZA July 21st, 2008 at 3:35 pm
Safari 525.13.3 - Mac OS X