Décalages FF3 FF2

Bonjour.

Je suis confronté à un problème de décalage entre FF2 et FF3, cette page, comme l'ensemble du site, fonctionne correctement pour IE6 IE7 et FF2.

voici le code html du menu :

<div id="menu_haut">
<ul id="menu_ge">

    <li><img src="../images/menu-creation-off.gif" style="display: none;" alt="creations de visuels"><a href="../creation-de-visuels/index.php" id="creation" title="Consultez les visuels, pochette cd, affiche, graphisme">&nbsp;Création<br>&nbsp;de visuels</a></li>

    <li><img src="../images/menu-edition-off.gif" style="display: none;" alt="éditions mise en page"><a href="../edition-mise-en-page/index.php" id="edition" title="mise en page de brochures, carte de visite, magazine">&nbsp;Édition <br>&nbsp;Mise en page</a></li>

    <li><img src="../images/menu-identite-off.gif" style="display: none;" alt="identité visuelle logo"><a href="../identite-visuelle-logo/index.php" id="identite" title="creations de logo, lettre, papéterie">&nbsp;Identité<br>&nbsp;visuelle / logo</a></li>

    <li><img src="../images/menu-site-off.gif" style="display: none;" alt="création de sites internet"><a href="../creation-sites-internet/index.php" id="site" title="conception graphique de sites internet, intranet, cd-rom">&nbsp;Site<br>&nbsp;internet</a></li>

</ul>
</div>

et le css appliqué :

#menu_haut {
position : relative;
top : -1px;
left : 235px;
width : 740px;
height : 64px;
border-left : 1px solid gray;
border-right : 1px solid gray;
}

ul#menu_ge a {
float : left;
width : 180px;
height : 64px;
margin : 0 0;
text-align : left;
text-decoration : none;
color : #000;
font-size : 14pt;
font-weight : bold;
font-family : Verdana, sans serif;
}

ul#menu_ge #creation {
background : url(images/menu-accueil-off.png) no-repeat #fff;
width:180px;
}

ul#menu_ge #creation:hover {
background : url(images/menu-accueil-off.png) no-repeat #fff;
}

ul#menu_ge #edition {
background : url(images/menu-accueil-off2.png) no-repeat #fff;
width:180px;
margin-left:5px;
}
ul#menu_ge #edition:hover {
background : url(images/menu-accueil-off2.png) no-repeat #fff;
}

ul#menu_ge #identite {
background : url(images/menu-accueil-off3.png) no-repeat #fff;
width:180px;
margin-left:5px;
}

ul#menu_ge #identite:hover {
background : url(images/menu-accueil-off3.png) no-repeat #fff;
}

ul#menu_ge #site {
background : url(images/menu-accueil-off4.png) no-repeat #fff;
width:185px;
margin-left:5px;
}

ul#menu_ge #site:hover {
background : url(images/menu-accueil-off4.png) no-repeat #fff;
}

la résolution de ce problème pour FF3 est de changer la propriété "margin-left" ce qui crée ensuite un décalage dans FF2 IE6 IE7 :

ul#menu_ge #edition {
background : url(images/menu-accueil-off2.png) no-repeat #fff;
width:180px;
[b]margin-left:5px;//valide pour IE6 IE7 et FF2
margin-left:-3px;//valide pour FF3[/b]
}

Merci d'avance pour tous vos conseils pour une bonne lecture dans l'ensemble des naviguateurs.