Position problem in IE only; with drop down nav and coda-like slider

[roadjan]

Hi all!

I am using the superfish drop down menu with a coda-like slider. The menu appears as it should in all but IE. In IE (6/7 tested) the menu appears behind the slider, it (obviously..) needs to appear in front, and does so in all other browsers...

Site: http://roundcloud.co.uk/ddrive/

Please ask if you need any more info. All code is in dev so please do not critique format for now :)

Thanks in advance

[barsev2]

Hi!

You must attribuate a z-index to each element of:
- your menu,
- your slider,
- their containers.

with these conditions:
- the higher element has the higher z-index, etc.
- the higher element of your menu must have a higher z-index than the higher element of the slider.
- all the z-index of your menu must be higher than the z-index of your slider.

For example:

#wrapper {z-index: 30000;}

div#coda-slider-1, div#coda-nav-1 {z-index: 19; }
div.panel-container, div#coda-nav-1 ul {z-index: 18; }
div.panel, div#coda-nav-1 ul li {z-index: 17}
div.panel-wrapper {z-index: 16; }
div.panel-wrapper h2 {z-index: 15; }

div#menu {z-index: 10000;}
div#menu a {z-index: 9500;}
ul.nav1 {z-index: 9000;}
ul.nav1 a {z-index: 8500;}
ul.nav1 li {z-index: 8000;}
ul.nav1 li a {z-index: 7500;}
ul.nav2 {z-index: 7000;}
ul.nav2 a {z-index: 6500;}
ul.nav2 li {z-index: 6000;}
ul.nav2 li a {z-index: 5500;}

etc.

Good luck!