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/ (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 http://www.dynamicdrive.com/forums/images/buttons/edit.gif 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!