Menu CSS - position et espace

Bonsoir,

c'est encore moi et mes petits soucis en CSS

Je planche sur le menu maintenant, mais il subsiste 2 problèmes.

1. Position
- Comme vous pouvez le remarquer sur l'image, le menu n'est pas à sa place. Il est beaucoup trop bas. Le conteneur dans lequel il doit être a un contour noir. J'ai bien essayer de remplacer

float: right;

Par

position:absolute;
position: relative;

mais le problème est le même.


2. Espace
-Regardez entre le bouton "Services" et "Contact", l'espace est plus grand qu'entre "Accueil" et "Services". Je ne comprends pas, surtout que les valeurs sont les mêmes pour tous.


http://www.hiboox.com/vignettes/3206/8rz3t1v.png


Code HTML qui nous intéresse :

<div id="navcontainer">
 <ul id="navlist">
   <li><a href="index.php?p=home">Accueil</a></li>
   <li><a href="index.php?p=services">Services</a></li>
   <li><a href="index.php?p=contact">Contact</a></li>
  </ul>
</div>

Code CSS qui nous intéresse :

/* Partie 3 : Menu header */

#navcontainer {
 float: right;
 height: 17px;
 border: 1px solid black;
}

#navlist ul {
white-space: nowrap;
padding: 0;
}

#navlist li {
margin-right: 15px;
display: inline;
list-style-type: none;
}

#navlist a {
padding: 1px 12px 1px 25px;
border: none;
background-image: url(img/btn/accueil.png);
background-repeat: no-repeat;
}

#navlist a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}

#navlist a:hover {
border: none;
background-image: url(img/btn/accueil_roll.png);
background-repeat: no-repeat;
color: #333;
}

Merci