Unordered List IE compatibility issues

[cjoltman]

I’m having issues with the side navigation of a website I’m designing. In IE 8 it displays as a horizontal list instead of a vertical list (as it does in all the other browsers) and in IE 7 it displays vertically with the "stepdown" bug that IE is also known for. I’ve reset/validated my CSS and tried implementing the IE bug fixes posted by CSS Tricks and other resources, but I’m just not seeming to get it… Can anyone provide me with assistance on this problem? I’m extremely appreciative of any help I can get.

I’m referring to the side navigation that displays the various car models. Please let me know if it would be better to provide the entire HTML for this page.

The page link:
http://oltmandesign.com/web/marinelli/store.html

Here is the side navigation HTML:

Code:

• 350z
  • 03-06 350z
  • 07-08 350z
• 370z
• G35
  • 03-07 Coupe
  • 03-06 Sedan
  • 07-08 Sedan
• G37

Here is the side navigation CSS:

Code:

#sidenavContainer {
float:left;
padding-top:26px;
display:inline;
}
ul#sidenav {
height:200px;
list-style:none;
float:left;
display:inline;
}
ul#sidenav a span {
display:none;
}
ul#sidenav li a {
width:154px;
height:50px;
float:left;
border:1px solid #9E9E9E;
margin-bottom:-1px;
outline:none;
list-style:none;
display:list-item;
}
ul#sidenav li#sidenav350z a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px 0px;
}
ul#sidenav li#sidenav370z a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -50px;
}
ul#sidenav li#sidenavG35 a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -100px;
}
ul#sidenav li#sidenavG37 a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -150px;
}
ul#sidenav li#sidenav350z a:hover {
background-position:-156px -0px;
}
ul#sidenav li#sidenav370z a:hover {
background-position:-156px -50px;
}
ul#sidenav li#sidenavG35 a:hover {
background-position:-156px -100px;
}
ul#sidenav li#sidenavG37 a:hover {
background-position:-156px -150px;
}
ul#sidenav ul {
display:none;
}
ul#sidenav li:hover ul {
display:block;
}
ul#sidenav ul#inner li a {
width:100px;
height:24.5px;
list-style:none;
}
ul#sidenav ul#inner2 li a {
width:100px;
height:24.5px;
list-style:none;
}
ul#sidenav ul#inner {
position:absolute;
margin-left:155px;
list-style:none;
}
ul#sidenav ul#inner2 {
position:absolute;
margin-top:102px;
margin-left:155px;
list-style:none;
}
ul#sidenav ul#inner li#n0306 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px 0px;
}
ul#sidenav ul#inner li#n0708 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -24.5px;
}
ul#sidenav ul#inner2 li#i0307 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -49px;
}
ul#sidenav ul#inner2 li#i0306 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -73.5px;
}
ul#sidenav ul#inner2 li#i0708 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -98px;
}
ul#sidenav ul#inner li#n0306 a:hover {
background-position:-100px 0px;
}
ul#sidenav ul#inner li#n0708 a:hover {
background-position:-100px -24.5px;
}
ul#sidenav ul#inner2 li#i0307 a:hover {
background-position:-100px -49px;
}
ul#sidenav ul#inner2 li#i0306 a:hover {
background-position:-100px -73.5px;
}
ul#sidenav ul#inner2 li#i0708 a:hover {
background-position:-100px -98px;
}

[cjoltman]

Thanks for your help! That fixed the main side navigation perfectly! I must have somehow put "display: inline" there during my attempts to troubleshoot the problems in IE. The addition of the "li" width is definitely what did it.

Unfortunately I’m still having an issue in IE7 with the second level of the navigation "ul#inner" being too far away from the main side navigation. I thought it was the double margin bug so I switched the margin to padding and it seemed to give the same effect. Do you have any suggestions for this?

Again, thank you for taking the time to provide me with assistance!

[Author]

Posts