drop down menus and z-index (I think??)

The usual subject,I guess, namely css drop down menus appearing behind certain content. This content is solely mp4 video. No other content is affected. And, of course, it’s unique to windows browsers, but just IE and Firefox (more about this later).

I thought it was due to the nefarious z-index bug. So I took care of that by:


#menubar menu {
z-index: 1000;
}

.. and the same for #menubar li, #menubar and #menubarParent, that is, up to the very top of the ancestor chain. Unless I really messed up, this should take care of the z-index bug in IE. But the problem also occurs in Windows’ Firefox. Windows’ Opera and Safari are okay, just like the entire Macintosh line.

The fact that both Firefox and IE are affected seems to indicate that the problem is not the z-index anomaly.

Here is the overall site link (http://webpages.charter.net/jolove/escort) and here is the menubarr.css (http://webpages.charter.net/jolove/Escort_Folder/css/menubar.css) link.

HAALP!

John Love

Hey John,

You are going to need to do two things.

add <param value="transparent" name="wmode"> and add wmode="transparent" in the embed tag.

This will let the menu go over the object.

But, a caveat. Since this is a Quicktime, you will need to either float or absolutely position your containing div (.yt_video). So you are going to have to retool your HTML structure some to accommodate.

Way, way back I had the same problem with a Flash movie and adding wmode="opaque" on just the embed tag worked just dandy. Someone, somewhere, stated that "opaque" imposed a much less severe strain on the embedded object because "transparent" demanded the object play with the alpha channel.

Nevertheless, no such luck on my mp4 videos.

Anyway, another helper on another board stated:

<object> elements are NOT handled by HTML but as "windowed elements" they are handled by the operating system of the client machine, and are at the top of the stacking order rather the "ancestral system" of the document flow.

So, according to this helper, my adding wmode="opaque" for Flash movies should not have worked, but it did.

Continuing on, this other helper seems to be saying to shove down my QuickTime movie so the dropdown CSS menu doesn't overlap. The thought of doing that makes me cringe.

IE I could live with, but not Firefox, ole reliable.