Z-Index, Ultimate Fade Slideshow, Scroller Code, Internet Explorer

[judylovesherdog]

Hi,

I've read several posts here and on other sites regarding adding a z-index to the #menu styles to correct the problem of the drop down menu appearing behind the Ultimate Fade-in Slideshow, on my site it is also appearing behind my text scroller on the right.

I've tried adding it to all of my #nav (menu style name) but to know avail.

The Wordpress theme I'm using has z-index noted as such:

#nav li:hover ul, #nav li.sfhover ul {

left: auto;
z-index:100;

I've tried raising the z-index to 1000 or 10000 and moving it to the #nav style and #nav li ul { per a suggestion I read on the Wordpress forum.

Is there another solution? You can view my issue on Internet Explorer at http://www.astuterecorder.com.

Thank you!

[Snookerman]

For z-index to work, the elements concerned have to be positioned. Adding position:relative; to the style of the elements you are giving z-index values should fix your problem. Here is a good tutorial that explains how z-index works:
http://css-tricks.com/video-screencasts/40-how-z-index-works/

Good luck!

[jscheuer1]

In a case like this, often all you need to do is simply put:

#nav, #nav * {
 position: relative;
 z-index: 10000;
}

before the other nav rules. In cases where that doesn't work, adding the !important directive:

#nav, #nav * {
 position: relative;
 z-index: 10000!important;
}

will sometimes do the trick.

[judylovesherdog]

Hi, Snooker and John,
Thanks so much for your tips and for recommending the z-index video.

I've tried both of your suggestions and neither work.

Snooker, when I tried your suggestion, it shifted the entire nav bar.

John when I tried yours, the dropdowns still appeared behind the dhtml files and when I hovered, it lowered the height of the box (so the white hover box was shorter than the original blue one).

Here are some specific questions I have:

If I incorporate the code you suggested, am I deleting the other references to position and z-index.

For your reference, here is the current nav styling:

/*- Nav / Dropdowns-*/

#nav, #nav ul{

padding: 0;

float:left;

list-style: none;


}

#nav {

padding: 0;




}

#nav a {

display: block;

}

#nav li {

float: left;

line-height:33px;

}

#nav li a:hover {

background: none;

}

#nav li ul {

position:absolute;

width: 15em;

left: -999em;

padding-top:1px;



}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;
z-index:100;


}

#nav li ul li {

background: #FFFFFF url(images/bgr-box-trans.png) repeat-x top;

border-bottom:1px dotted #dedbd1;

border-left:1px solid #dedbd1;

border-right:1px solid #ffffff;

line-height:28px;

width:15em;

}

#nav li:hover, #nav li.hover {

position: static;

}

#nav li ul ul {

margin: -29px 0 0 15em;

}

#nav li:hover ul ul, #nav li.sfhover ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {

left: auto;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

Thank you again for your help.
http://www.astuterecorder.com (problem seen on IE only)

[Snookerman]

Doing what I told you works just fine:

<div id="topmenu" style="position:relative; z-index:10;">

You were probably targeting the wrong element. Remove the code John wrote and add this instead and it should fix your problem.

Good luck!

[judylovesherdog]

Hi, Snookerman,

I did precisely what you suggested and it worked. Thank you so much!

[Snookerman]

You're welcome, glad to help! You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

Good luck with the site!