Foutje Basing

Hallo,

Wie kan mij helpen met een foutje in de basing? In een menu wil ik als achtergrond een hover gebruiken. Alleen verspringen de menuitems nu een beetje. Wie weet hoe ik dat kan oplossen?

URL: http://www.ivomuijtjens.nl/Wallie/

CSS

/*Menu*/
#menu 
{
    background-image: url(images/menu.png);
    width: 957px;
    height: 67px;
}
#navigatie 
{ 
    font-family: Verdana; 
    font-size: 12pt; 
    color: #FFF; 
    font-weight: bold; 
    margin-left: 5px; 
}
#navigatie ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}
#navigatie ul li 
{ 
    float: left; 
    padding-left: 5px; 
}
#navigatie ul li a 
{ 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding-left: 20px; 
    padding-top: 25px 
}
#navigatie ul li a:hover 
{ 
    background-image: url(images/hover.png); 
    background-repeat: repeat-x; 
    height: 37px; 
    padding-right: 20px; 
    padding-left: -10px; 
}

HTML

<div id="navigatie">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Inloggen</a></li>
    <li><a href="index.html">Aanmelden</a></li>
    <li><a href="index.html">Uitleg</a></li>
    <li><a href="index.html">Forum</a></li>
    <li><a href="index.html">Contact</a></li>
</ul>
            </div>

Offtopic:

Mag ik iets vragen?
Hoe groot heb je je layout gemaakt in photoshop?

Ziet er erg gelikt uit!

je moet je padding op zowel ul li a hetzelfde houden als op ul li a:hover

Basdost schreef:

Offtopic:

Mag ik iets vragen?
Hoe groot heb je je layout gemaakt in photoshop?

Ziet er erg gelikt uit!

Die Website is van mij.
Ivo Based hem
Die Layout is gemaakt door GFXSKY.nl

Mvg

[KNIP] Werkt niet.

EDIT2:// Dit werkt zeker weten:

/*Menu*/
#menu 
{
    background-image: url(http://www.ivomuijtjens.nl/Wallie/images/menu.png);
    width: 957px;
    height: 67px;
}
#navigatie 
{ 
    font-family: Verdana; 
    font-size: 12pt; 
    color: #FFF; 
    font-weight: bold; 
    margin-left: 5px; 
}
#navigatie ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}
#navigatie ul li 
{ 
    float: left; 
    padding-left: 5px; 
}
#navigatie ul li a 
{ 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 25px 
}
#navigatie ul li a:hover 
{ 
    background-image: url(http://www.ivomuijtjens.nl/Wallie/images/hover.png); 
    background-repeat: repeat-x; 
    height: 37px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 25px 
}

Bedankt voor de hulp. Heb het gedaan zoals Marjolein zei.

Wiitse ook bedankt. Zo werkt die inderdaad ook. Maar ik houd de padding links en rechts liever op 20

#navigatie ul li a 
{ 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px 
}
#navigatie ul li a:hover 
{ 
    background-image: url(images/hover.png); 
    background-repeat: repeat-x; 
    height: 37px; 
    padding-left: 20px;
    padding-right: 20px; 
    padding-top: 25px 
}

graag gedaan, netjes gedaan zo.
En idd mooie layout