...

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



itsmrchris
08-11-2010, 08: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, 04: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum