Grow your CSS skills. Land your dream job.

Horizontal list appears vertical in IE 7

  • # August 18, 2012 at 11:47 pm

    My horizontal nav appears vertical in IE 7. Here is the link to my test site: Inspired to Design. The nav is at the top (about, web, print, contact).

    My nav css:

    #nav {
    float: left;
    margin: -5.15em 0 0 30em;
    }

    #nav ul {
    list-style: none;
    position: relative;
    }

    #nav ul li {
    display: block;
    float: left;
    font-size: 1.2em;
    position: relative;
    }
    #nav ul li a {
    display: block;
    padding-left: 3em;
    }
    #nav ul li a:link, #nav ul li a:visited {
    color: #C6C;
    text-decoration: none;
    }
    #nav ul li a:hover, #nav ul li a:active, #nav ul li.selected a:link,
    #nav ul li.selected a:visited {
    color: #6C6;
    text-decoration: none;
    }

    In a separate css style sheet with styles for IE7 only, I coded the following because I read that adding ‘display: inline-block’ and/or assigning a width to floated list items may solve the problem. I tried each style rule separately and then together. I also tried ‘display: inline;’.

    #nav ul li {
    display: inline-block;
    width: 10em;
    }

    The result of the above code is the second two list items are vertically aligned under the top two list items with a lot of padding to the right of each list item.

    I hope this is clear and detailed enough.

    # August 19, 2012 at 11:14 am

    try removing the ie7.css and giving the #nav ul a width of about 450px

    # August 19, 2012 at 10:22 pm

    Thank you wolfcry911! Your solution worked.

    # August 19, 2012 at 10:42 pm

    @designerkris
    You can simplify your :hover and .active and use class=”active” in your HTML


    #nav ul li a {display:block; padding-left:3em; text-decoration:none;}
    #nav ul li a:hover {color:#C6C;}
    #nav ul li a.active:hover {color:#6C6; cursor:text;}
    # March 12, 2013 at 4:40 am

    After searching everywhere for an answer to a similar problem, I tried your solution and it worked! Thanks :)

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

You must be logged in to reply to this topic.

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