Grow your CSS skills. Land your dream job.

Unordered List IE compatibility issues

  • # March 1, 2010 at 12:43 pm

    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:

    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;
    }
    # March 2, 2010 at 6:04 am

    Try taking out "display: inline" and give the UL the width of one of it’s LI’s.

    # March 2, 2010 at 9:41 am

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".