[Résolu] Problème compatibilité Firefox/Internet Explorer

Salut à tous,
Je viens vous voir aujourd'hui car j'ai un petit soucis sur un site web que je suis en train de coder.

Cela concerne Internet Explorer. En effet, sur le lien ci-dessous, une image est doublée sous internet explorer et non sur les autres explorateurs.

L'image background de mon menu est doublé... Je ne vois pas du tout pourquoi et cela commence à m'agacer .

Voici le lien du site : http://pierrepremel.fr/uploads/gamera/

Si quelqu'un a une solution pour enlever le doublon du menu, ce sera avec grand plaisir .

Voici le code css :

#menu
{
float: left;
width: 1025px;
height: 59px;
background: url(images/menu.png) no-repeat;
border-radius: 3px;
margin-top: 10px;
}

#rubriques
{
margin-left: 2.7%;
height: 100%;
}

et le code html :

<div id="menu">
<div id="rubriques">
<a href="#"><img src="images/menu/accueil.png" onmouseover="this.src='images/menu/accueil.png'" onmouseout="this.src='images/menu/accueil.png'" alt="" style="margin-left: 0 ;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/news.png" onmouseover="this.src='images/menu/news.png'" onmouseout="this.src='images/menu/news.png'" alt="" style="margin-left: 1.5% ; margin-right: 1.5%; margin-top: 9px"/></a>
<a href="#"><img src="images/menu/team.png" onmouseover="this.src='images/menu/team.png'" onmouseout="this.src='images/menu/team.png'" alt="" style="margin-right: 1.5% ;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/premium.png" onmouseover="this.src='images/menu/premium.png'" onmouseout="this.src='images/menu/premium.png'" alt="" style="margin-right: 1.5% ;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/boutique.png" onmouseover="this.src='images/menu/boutique.png'" onmouseout="this.src='images/menu/boutique.png'" alt="" style="margin-right: 1.5% ;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/outils.png" onmouseover="this.src='images/menu/outils.png'" onmouseout="this.src='images/menu/outils.png'" alt="" style="margin-right: 1.5% ;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/forum.png" onmouseover="this.src='images/menu/forum.png'" onmouseout="this.src='images/menu/forum.png'" alt="" style="margin-right: 1.5%;margin-top: 9px"/></a>
<a href="#"><img src="images/menu/faq.png" onmouseover="this.src='images/menu/faq.png'" onmouseout="this.src='images/menu/faq.png'" alt="" style="margin-top: 9px"/></a>
</div>
</div>

Je vous remercie pour votre aide.
Cordialement,
Pierre.
Modifié par bizix (31 May 2012 - 20:29)

Bonjour,

Le problème est que ton code est invalide. Va faire un tour sur le site du w3c:
http://validator.w3.org/

Ce faisant, IE dédouble ton menu. Firefox lui ferme seulement une balise <a> mal positionné. Dans tous les cas, le rapport d'erreur du W3C te pointera ton erreur exacte.

Problème résolu,
C’était juste un petit décalage de balise.

Merci