can't see how to use z-index for dropdowncontent.js and jquery conflict

[dhart5241]

1) Script Title: dropdowncontent.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: I'm using a jquery slideshow/rotator for my morphing header image.

I'm using the dropdowncontent.js for my dropdown navigation 'pane'.

I had the same problem when I was using a flash header, but fixed that by adding <param name="wmode" value="opaque"/> in the code. Now I'm using jquery I obviously need to fix what seems to be the same problem there.

The part of the 'pane' that covers the jquery display is hidden behind it.

I've spent a lot of time looking thru the forums and think that recommendations regarding the z-index setting sound like the thing to do, but I don't see where to add or modify it. I see it in the jquery js and css, but the values are all 15 and below (there was one tooltip value set to 99999, but I changed that).

I didn't find any z-index in the dropdowncontent.js. Do I need to add it there?

What is the syntax? Am I in the right ballpark.

Page with the problem: http://www.thelodgeonlakedetroit.com/index2.php

Just mouse over the navbar links below the header.

Thanks

[dhart5241]

I'm answering my own question. Got the fix and tested on two sites.

I had not really followed discussions of stack order and z-index before, so I did some basic research on them. Harkening back to css and css2, I suppose the layering that css2 offered must have been the result of this third dimension (x, y, now z).

The dropdowncontent I use has a series of panes that either drops down, or goes up, depending on the site. I had begun to use the one that would keep the panes from displaying in front of the jquery items that wanted to 'show thru'.

Having looked at the jquery code that would appear to be because they had z-index values, while the div tags in my nav panes had no z-index attributes. By simply adding this z-index value (I picked 99 - the highest jquery value I saw was 5) in each of the div tags displaying the panes they work fine in IE, firefox and chrome now.

I found some very good articles on this topic. My favorite for explaining stacking order and z-index on the macro level was http://www.vanseodesign.com/css/css-stack-z-index/.

Others that were very helpful:

Understanding z-index: https://developer.mozilla.org/en/understanding_css_z-index

Stacking order of multiple backgrounds: http://css-tricks.com/stacking-order-of-multiple-backgrounds/

While I did not get my answer from this thread directly, it was these forums that headed me in the z-index direction.