Grow your CSS skills. Land your dream job.

[Solved] Nav Menu double-spaced??? In I.E. 8

  • # July 29, 2009 at 2:26 pm

    Ok, the css validated fine. When going from FF to IE 7, I had to simply remove the float from the <ul> containing the menu, and it worked fine. In IE 8 however, the menu renders as if there are blank <li>’s between each menu item. I’ve tried removing the float for this too, but all that does is shift the entire menu (extra spaces and all) over to the left.

    Any help would be MUCH appreciated.

    Here’s the address: http://mosonline.dnsalias.net/index.php

    Here’s the mark-up for the Menu:

    And here’s the CSS (Based on what worked in FF)

    Code:
    div#side-menu {
    width: 164px;
    font-size: 1.5em;
    position: fixed;
    text-align: right;
    }

    div#side-menu ul#side-nav {
    list-style: none;
    height: 200px;
    float: right;
    display: block;
    }

    div#side-menu ul#side-nav li{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 137px;
    display: block;
    margin-top: 3px;
    height: 19px;
    line-height: 19px;
    position: relative;
    right: 2px;
    padding-top: 1px;
    text-align: right;
    color: #003663;
    }
    div#side-menu ul#side-nav li:hover {
    background-image: url(images/menu-link-hover.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    width: 137px;
    color: #fff;
    }

    div#side-menu ul#side-nav li a.nav-link {
    position: relative;
    display: block;
    text-align: right;
    color: #003663;
    right: 10px;
    height: 19px;
    width: 137px;
    }

    div#side-menu ul#side-nav li a.nav-link:hover{
    color: white;
    width: 137px
    }

    # August 2, 2009 at 3:54 pm

    Thanks! This will be an "every-site" requirement now!

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".