Son of Suckerfish and Flash

So, you’ve implemented the Son of Suckerfish dropdown menu on your cool new site design. And it just so happens that you have an awesome little piece of Flash on the site - something to add to the look in a small way without looking like a cheesy animated GIF. It’s in a nice spot, right below your new dropdown menu.

But, hold the phone! You’ve now discovered that the dropdowns fall behind the Flash object. You double-check your CSS, and you’ve got the Flash object set with a z-index of 0, and the dropdowns at 1000 - but the dropdown is still falling behind the Flash.

What gives?

Well, here’s the thing. Since Flash is so often used within websites, people start thinking that it’s a part of (X)HTML, and/or it’s something that works within the same parameters of (X)HTML. Almost like it’s a part of the spec or something.

It’s not.

Flash is something that exists outside of the scope of the DOM. It’s not a part of (X)HTML at all. Think of it like this: You have a piece of paper, and you draw a nice picture on it with pencil. Then you cut a picture of an orange out of a magazine and tape it to the paper. It’s not really a part of the drawing, until you tape it on there, and once it’s on, it covers the drawing.

Flash is like that - it’s an external object that needs to be embedded in the page, and it needs certain coding so the browser can make it work.

With that in mind, how do you get some of your drawing to show up over the photo?

You must set the background of the Flash object to be transparent. In two places. Add this line to your object/embed code within your (X)HTML file:

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

…and in the line that starts out <embed src=”…>, you must add ‘wmode=”transparent”‘.

That should do it for ya!

Posted by
August 3rd, 2006