treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Horizontal list appears vertical in IE 7

  • 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.
  • try removing the ie7.css and giving the #nav ul a width of about 450px
  • Thank you wolfcry911! Your solution worked.
  • @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;}
  • After searching everywhere for an answer to a similar problem, I tried your solution and it worked! Thanks :)