Z-index conflict with Flash and DHTML widgets

I’m working on a project that has a Flash movie and a DHTML dropdown menu on the same page. Flash movies like to sit on top of the page and the dropdown would slide behind the movie. Since this isn’t what I wanted, I needed to find a way to make the it have a lower z-index than the dropdown.

I did a Standardista Search for a cure and didn’t see it. But a quick message to the Web Standards Group returned the solution. It’s actually pretty easy.

UFO Flash detection and insertion script

I’m using the UFO JavaScript to detect the browser’s compatibility with the Flash movie and insert it on the fly. This method provides good default content to those without Flash and valid, shiny, happy Flash to those with it.

UFO gives you the ability to insert parameters into the movie and this is what you need to cure the z-index issue. You need to set the wmode parameter to “transparent.”

var FO = { movie:"swf/myMovie.swf", width:"300", height:"120", majorversion:"6", build:"40", wmode:"transparent" }

That’s all there is to it.

About

This site features helpful hints, in-depth exercises, and book reviews. It’s the site that I want to have handy when I need to remember how to do something and what to look out for. It’s primary focus is standards-based web development with an eye towards accessibility.

It’s primarily written by Ted Drake, although guest writers are welcome to add to the discussion. If you would like to write something for this blog or to re-publish an existing story, please contact Ted: ted@tdrake.net.

Last-child is named after a CSS3 selector that lets you target the last object in a document tree. I also chose the name because I’m the youngest of 6 kids.