How to make dropdown menus show over Flash in IE

I recently upgraded a clients site to have a cool flash header under the dropdown navigation, a design that moved the nav bar up out of the way to create a cleaner, more trendy look; drawing attention to both the  header and the links.  Everything was going smoothly, (too smoothly if you know what I mean..) until  a browser check revealed that the dropdown was not working in Internet Explorer.  What a shock!

I will refrain from going into a rant concerning my loathing for the worst browser in the world and the people who design it.  Instead, I have included my fix for this problem so those experiencing it can move on with their lives.

Add these parameters inside the “object” or “embed” tag containing the code for the .swf
<param name="wmode" value="transparent" />
<param name="window" value="transparent" />
<param name="order" value="bottom" />

add this to the css of the div containing the .swf file

#divname{
z-index: 0;
}

This will work with Flash movies and swf files using Slide Show Pro Director as well.

Note:  An interesting side effect of this technique is that it really renders the flash transparent, in that if the original file simply has a colored background and not an object (a photo or illustrator file turned into a symbol and placed on the stage in Flash).   If you don’t want the file to have a transparent background, you will have to edit the source file ( the .fla ) to have a colored symbol as a background.

To illustrate: the first movie below has the parameter wmode = “transparent” . The background color is gone and if you scroll up or down, you’ll notice that it hides behind the header and footer of this site.  The second has no wmode parameter and the background shows and it scrolls in front of the header and footer.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.after9design.net/wp-content/uploads/2011/07/Bigger.swf” width=”200″ height=”200″ targetclass=”flashmovie” wmode=”transparent”]

[/kml_flashembed] [kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.after9design.net/wp-content/uploads/2011/07/Bigger.swf” width=”200″ height=”200″ targetclass=”flashmovie”]

[/kml_flashembed] After9Design is a graphic and web design firm in Santa Rosa, CA.