Need some help with the z-index

HTML & CSS
1

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

2

Try adding

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

To the object including the Flash.

3

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

4

That video is an mp4, not flash.

5

That did the trick!

6

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.

7

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/

8

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

9

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!

10

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: