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;
}
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;
}