Grow your CSS skills. Land your dream job.

[Solved] IE8 Double Navigation Height

  • # May 26, 2010 at 3:39 pm

    Lately I have been working on the website of my father’s driving school http://www.soepeldoordebocht.nl. I have this problem with IE8 that it is adding a lot of height on top of my navigation and I don’t have a clue how to fix it. Because of the extra height it also shows the background image (almost) twice.

    I have been trying to add a IE8 stylesheet with both padding and margin on 0 and some other stuff, but nothing seems to make any sense.

    Does anyone have a clue what is going on?

    Code:
    /* — MENU — */
    div.menu {
    width: 900px;
    height: 36px;
    clear: both;
    background-image: url(../../images/buttonbackground.jpg);
    }

    /* — MAIN NAV — */
    .navigation {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    float:left;
    }
    ul.navigation a {
    color: white;
    }
    ul.navigation a:link {
    text-decoration: none;
    font-size: 1.5em;
    color: white;
    padding: 0.4em 1.3em 0.4em 1.3em;
    }
    ul.navigation a:visited {
    text-decoration: none;
    font-size: 1.5em;
    padding: 0.4em 1.3em 0.4em 1.3em;
    }
    ul.navigation a:hover {
    text-decoration: none;
    color: gray;
    font-size: 1.5em;
    padding: 0.4em 1.3em 0.4em 1.3em;
    }
    ul.navigation li {
    display: inline;
    }

    # May 26, 2010 at 4:11 pm

    sarton85,

    You need to properly close your anchor tag inside the header div.

    Change this:

    Code:

    autorijschool bergeijk

    To this:

    Code:

    Best regards.

    # May 26, 2010 at 4:39 pm
    Quote:
    You need to properly close your anchor tag inside the header div.

    Thanks man, that worked brilliantly!

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