Problème affichage menu css sous IE7

Bonjour tout le monde !
Comme pas mal de gens, je pense être arriver au maximum de mes connaissances !
Voici mon problème, j'ai un menu en css qui sous ie7 et ie6 qui fait une sorte d'escalier.

Voici mon code d'origine css:

/* Menu de navigation */
#navigation {
position:relative; 
list-style-type:none; 
margin-bottom:30px;
height:42px;
border-bottom:#0f5c86 1px dotted;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	text-decoration: none;
	font-size:12px;
	color:#105f8b;

}
#navigation ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li.gauche a {
	float: left;
	margin-right: 20px;
	color:#3399cc;
	
}
#navigation li.gauche a:hover {
	float: left;
	margin-right: 20px;
	color:#66ccff;
	text-decoration:underline;
}
#navigation li.droite a {
	float: right;
	margin-right: 0;
	margin-left: 10px;
	padding: 3px 0;
	color:#8cbd45;
	padding-left:20px;
}
#navigation li.droite a:hover {
	float: right;
	margin-right: 0;
	margin-left: 10px;
	padding: 3px 0;
	color:#bddb81;
	padding-left:20px;
	text-decoration:underline;
}

Et mon html :

<div id="navigation">
      <ul>
        <li class="gauche"><a href="">Les formations</a></li>
        <li class="gauche"><a href="">Formules et tarifs</a></li>
        <li class="gauche"><a href="">La qualité</a></li>
        <li class="gauche"><a href="">La réduction d'impôts</a></li>
        <li class="gauche"><a href="">Le blog</a></li>
        <li class="droite"><a href="" class="liencontact">Contactez-nous</a></li>
        <li class="droite"><a href=""  class="lienpro">Espace Professionnel</a></li>
        
      </ul>
    </div>

Alors merci de ne pas crier, je me doute que le code doit comporter d'autres problèmes, mais je fais ce que je peux...lol

Tout s'affiche bien sous ie8, safari et mozilla...

mais pas sous IE7 :



J'ai pas mal cherché pour finalement trouver une solution qui est de rajouter dans mon css :

#menu ul li {
    list-style: none;
    float: left;
}

Mais ce n'est pas vraiment une solution puisque ça me pose de nouveaux problèmes d'affichages concernant mes liens qui se trouvent à droite :
le lien espace pro est bien positionner sur la droite mais le contact se met en dessous.

Merci par avance pour vos réponses...
Modifié par alexia75 (20 May 2010 - 15:54)

Bonjour.
Je te propose de jeter un petit coup d'oeil à cet article, et d'essayer d'y trouver une alternative à ton utilisation de la propriété float.