0

Im using wordpress, and my own version of a twenty eleven theme. I have a site where the main header has a z-index:9999, then completely independent of that I have a slider, that has z-index:1. The slider is completely independent of the header and main content page. Yet for some reason in IE7 when I use the dropdown menu, the submenu hides behind the slider. This has nothing to do with the sub-menu though, it is the entire header (its just the sub-menu is where the user sees that its being hidden)

Here is the header..

#access {

background:transparent;
clear: both;
display: block;
float: left;
margin: 0 0;
width: 980px;
height:70px;
position:relative;
z-index:99999;

}

Here is the slider,

#top-slider {
width:1920px;
position:absolute;
margin-top:70px;
height:300px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
left:0px;
background: #000;
z-index:1;
}

Im confident that these are the only two elements that are causing the issue, because when I remove the z-index:1 from top-slider, the header can be seen fine, the only reason I cant do that though is because then the slider starts hiding behind the main page.

Thank you for any help.

Adrian
  • 1,976
  • 5
  • 41
  • 105

1 Answers1

0

Take a look at this writeup (https://stackoverflow.com/a/3998006/859324) and see if it helps. It mentions specific problems in older versions of IE and how siblings compared z-index values. So maybe the #top-slider div is comparing its z-index to the #page div, instead of #access.

Another similar issue I found mentioned changing the z-index of #top-slider to -1 instead of 1, though I can't say I sufficiently know all the ramifications of doing so.

Community
  • 1
  • 1
gotohales
  • 3,665
  • 1
  • 20
  • 34