Need some help with the z-index

I have an embbed video on one of my pages, and the drop-down menu keeps going behind the video; but I want it to go in front of the video.

I know I have to set the z-index, but I’ve tried several different settings and I still can’t get it. What am I doing wrong here?

My web site can be found here

Try adding

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

To the object including the Flash.

It’s not a z thing. It’s a wmode thing. Just google “add wmode opaque to flash”

That video is an mp4, not flash.

That did the trick!

For some odd reason this doesn’t work in FireFox 3.6.13, yet it works in IE 7, IE 8, Chrome Safari, and Opera. My drop-down menu isn’t even showing in IE 6, don’t know if that’s relate or not.

Your menu not showing up in IE6 is because IE6 doesn’t recognize the :hover pseudoclass on anything except the <a> element. You’re using it on <li>'s to allow for block level drop downs. You can use jQuery to fix that.

There’s an excellent tutorial on multi-level menus with pure CSS for modern browsers and a JS fallback for IE6 here: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

The drop down menu works fine in IE 6, on the other pages that don’t have the video.

I tried adding:

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

But it made the video transparent in Firefox on Windows. So I tried setting the z-index value in the ul ul of my CSS and I got some interesting results depending on the browser and OS.

Windows

IE 6: Drop down menu not working
IE 7: Behind
IE 8: Behind
Firefox 3.6: Front of
Safari 5: Behind
Chrome: Behind
Opera: Front of

Mac OS X

Firefox 3.6: Behind
Safari 5: Front of
Chrome: Behind
Opera: Front of

I am so frustrated over this!

It seems that wmode isn’t one of the supported options for quicktime which is why some browsers support it and some don’t. I can get your movie working in all but not all at the same time.

I suggest you convert the movie to flash and then it will work everywhere.

Your dropdown menu was working in Ie6 when I checked and will overlap the menu if you add the <param name=“wmode” value=“transparent”>. Safari need wmode=“transparent” in the embed tag but that’s what kills Firefox (actually Firefox works but only on odd pixels as you close or open the window).

I gave up.:slight_smile: