PDA

View Full Version : IE z-index - dropdown menu falling behind slideshow in IE



itsmrchris
08-11-2010, 07:14 PM
http://bit.ly/bYjxep

see link above. we are trying to find a solution to get our submenus from our navigation to not fall behind the slideshow immediately below it. We have tried 20 different z-index combinations, and are frustrated! This is only happening in IE 6&7 of course. All other browsers are working properly. The page is validated and error-free.

Anyone care to take a look at this and help me with this one?



#menu (line 101) {
z-index: 5000;
height: 40px;
line-height: 40px;
background-color: #000000;
background-image: url("../images/menu_bg.gif");
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
ul.tabs (line 33) {
display: table;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
position: relative;
}

#menu ul (line 109) {
margin-top: 0pt;
margin-right: auto;
margin-bottom: 0pt;
margin-left: auto;
}

ul.dropdown (line 61) {
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
position: absolute;
z-index: 999;
top: 100%;
width: 200px;
display: none;
left: 0pt;
}

#menu ul (line 109){
margin-top: 0pt;
margin-right: auto;
margin-bottom: 0pt;
margin-left: auto;
}

#menu ul.dropdown (line 146){
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #777777;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
overflow-x: hidden;
overflow-y: hidden;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
width: 290px;
}





And Now the Slideshow:
#carousel {
width:1000px;
height:350px;
overflow:hidden;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
}
#carousel ul {
width:4000px;
list-style:none;
padding: 0;
margin: 0;
position: relative;
}

BubikolRamios
08-12-2010, 03:42 AM
tip:
1.sometimes z-index works only if parent element allso has it (IE I think)
2.try setting parent element position to relative or absolute.

Lately I was thinking mybe I should handle all z-indexes on page server side.
i.e. invent some max value and then set each next element one less than element before.