[Solved] IE8 Double Navigation Height

[sarton85]

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;
}

[david_v]

sarton85,

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

Change this:

Code:

To this:

Code:

Best regards.

[sarton85]

Quote:

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

Thanks man, that worked brilliantly!

[Author]

Posts