HELP! Menu z-index problems!

[davidjsample]

I have been working on our site http://pineknotmarina.com for over a year now and I cannot get this problem fixed.

I noticed recently that my CSS menu is fine on every single page except my home page.

See it working here: http://pineknotmarina.com/bigbearboatrentals.html

On my home page I have a javascript slideshow and a vertical menu and the drop-downs from the hover are **under** the javascript. I have tried everything I can think of to change the z-index but nothing seems to work right. Currently every menu css option is z-index: +6 and the javascript is z-index: -5

I think this problem has something to do with the z-index but I am a bit of a beginner at CSS so it could be something else I don’t know.

Can anyone offer some suggestions?

[wolfcry911]

I can’t replicate the problem in FF, Safari, or Chrome on Mac OS X. What browser are you using? If earlier IE, try adding position: relative to both #menuleft and #maincontent

[Paulie_D]

Without looking at your site yet….Z-index doesn’t take effect unless you set a positioning context IIRC.

Try adding `position:relative` to the elements in question and see what happens.

[davidjsample]

Wolfcry, I get the problem in chrome and IE on PC for starters. My IE is 9.0. The menu on the left is fine but the hover over the options (“boat rentals”, “marina services”) fails to open the dropdown to the right. (actually i am pretty sure it is opening it, just behind the JavaScript)

Paulie_D I changed the position to relative on the JavaScript and the container and redid the z back to auto but I still have the same problem.

does not work here: http://pineknotmarina.com/index.html

works properly here: http://pineknotmarina.com/bigbearboatrentals.html

Are menus typically given a position value?

[CrocoDillon]

It works fine here on Windows 8, IE10 (and IE10 in IE9, 8 and 7 mode).

[davidjsample]

Maybe it is my system. I made several changes as recommended to the position values and that could have made a difference too. I’ll try it on a couple more systems tonight. Unfortunately, my operating system is vista so I can never really trust it.

[Senff]

It’s not working in real older versions of IE (IE7/IE8/IE9 mode in IE10 works just fine).

Though, it’s not just a Javascript slideshow — it’s Flash. You should try adding the wmode transparent parameter to your Flash file (twice — once as a PARAM tag and once as an attribute to the EMBED tag):

[davidjsample]

Yup, that worked. It seems it is mostly my work computer that is having the problem. I tried it on several other platforms and it worked just fine. I changed the positioning to relative too so that might have helped.

[Author]

Posts