Fixing CSS Drop-Down Menus That Hide Behind Flash Objects

By V Scott Ellis on December 30th, 2008 | Filed Under CSS
Tag(s): CSS, Drop-down Menu, Flash, WordPress, WordPress How-To

This guest post was written by V Scott Ellis of Blackbox Technologies, a business that helps companies to maximize their web presence. If you have WordPress knowledge and are interested in writing a post for WordPress Hacks, please contact us.

One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

In the flash element:

Look for the flash <object> tag and add the following code:

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

You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag .

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Digg This | Stumble it | Add to Del.icio.us | | Print This

There Are 11 Responses So Far. »

1 Luanigio
Friday, January 2nd, 2009 at 6:06 am

Great!
I go immediately to try these tips.
Thank you and happy new year.

Ciao.
2 Shirley
Saturday, January 3rd, 2009 at 5:48 pm

Hmmm. I don’t think that this solution is cross-browser compatible. I played around with a similar thing this past fall and had a problem with ‘Safari 2′. Surprisingly, it worked on every single browser (including IE flavors) as well as Safari 3, but not Safari 2.
3 Shirley
Saturday, January 3rd, 2009 at 5:58 pm

Yeh, here’s my article that I published on the subject back in September…

http://www.velvetblues.com/web-development-blog/safari-and-flash-dont-play-well-together/

I couldn’t find a solution.
4 Shirley
Sunday, January 11th, 2009 at 9:45 pm

No follow up? (Sorry for the persistence. :-))
5 Ryan
Monday, January 12th, 2009 at 8:48 pm

@Shirley I wasn’t aware that Safari 2 couldn’t handle the overlays. I don’t think it’s a huge issue though as Safari 2 is such a rarity these days.
6 Sudeep Tamakar
Thursday, February 12th, 2009 at 5:32 am

Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway.
7 mindless
Friday, March 6th, 2009 at 8:06 am

Is it just me and my bad luck? Ive found this solution in other places and it doesnt work for me… plus now my nav bar is all screwed up in IE. has anyone else had this not work? is there another solution somewhere? Its driving me crazy.
8 sergio zambrano
Saturday, May 9th, 2009 at 2:15 am

Shouldn’t z-indexed elements have to be absolutely, fixed or relatively positioned and into the same parent in order to them elements interact with each other?

If your elements are under different parents, the parents will determine the z-index that will determine the stacking.
9 Jimmy
Tuesday, May 26th, 2009 at 3:37 pm

Thank you so much!, super straight forward and perfectly helpful for my situation.

Thank you again Great JOB!