Problême sur un menu avec hover sous ie6 sur le premier élément de la

Bonjour,

Etant débutant niveau css et me devant de corriger un bug d'affichage afin d'avoir une totale compatibilité entre les différents navigateurs utlisés, je me retrouve avec un problème d'affichage au niveau de mon menu et ce, uniquement sur IE6.

En effet, lorsque l'on souhaite afficher le sous-menu du premier élément de mon menu, celui-ci se retrouve littéralement décallé sur la gauche (le hover par contre marche). Le fond du premier élément de mon menu ne fonctionne pas correctement lui aussi et le problème part surement de là.

Ce problème n'intervient que pour le premier élement de mon menu, les autres fonctionnant correctement.

Voici les bouts de code associés :

Les appels dans le fichier php niveau css se font de la sorte :
<div id="menu">
<ul id="nav" >
<li> etc...

Maintenant les références css:

Pour l'affichage du menu :

body { 
behavior:url("csshover2.htc"); 
}
#menu{
position:absolute;
/margin-top:150px;
-margin-top:150px;
/margin-left:682px;
-margin-left:341px;
width:125px;
height:150px;
font-style:normal;
font-family:Arial;
font-size:15px;
text-align:left;
color:#ffffff;
}

Pour les éléments du menu:

#nav, #nav ul {
	float: left;
	width: 198px;
	list-style: none;
	padding: 0;
	margin: 0 0 0em 0;
	font-family:Arial;
    font-size:13px;
    text-align:left;
}

#nav a {
	display: block;
	width: 10em;
	color: #ffffff;
	text-decoration: none;
	padding: 0.00em 0.2em;
}


#nav li {
	padding-right: 1em;
	margin-top:-2px;
	width: 120px;
	height:16px;
	font-family:Arial;
    font-size:13px;
	font-weight:normal;
    text-align:left;
	border-top:0px solid #574d1e;
	border-bottom:0px solid #574d1e;
	background-color:#574d1e;
	
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 100px;
	font-weight: normal;
	border-width: 0.25em;
	margin-left: 120px;
	margin-top:-16px;
	font-family:Arial;
    font-size:13px;
	font-weight:normal;
    text-align:left;
	background-color:#574d1e;
	z-index: 2;
}

#nav li li {
	padding-right: 1em;
	width: 98px;
	font-family:Arial;
    font-size:13px;
	height:16px;
	margin-top:-1px;
	font-weight:normal;
    text-align:left;
	border-top:1px solid #574d1e;
	border-bottom:1px solid #574d1e;
	background-color:#574d1e;
}

#nav li ul a {
	color: #ffffff;
	width: 13em;
	font-weight:normal;
	font-family:Arial;
    font-size:13px;
    text-align:left;
}


#nav li:hover ul ul, #nav li:hover ul ul ul{
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover{
	background: #be1881;
}
#nav li.visited ul{
	left: auto;
	z-index: 1;
	height:17px;
	
}
#nav li.visited{
	background: #be1881;

}

#content {
	clear: left;
}

#content a {
	color: #7C6240;
}

#content a:hover {
	text-decoration: none;
}
#titremenucentre {
width: 520px;
height:15px;
background-color:#be1881;
margin-bottom:10px;

padding-left:5px;
font-family:Arial;
font-size:12px;
padding-top:0px;
color:#ffffff;
text-decoration: none;
}
#titremenucentrer {
width: 520px;
height:15px;
background-color:#be1881;
margin-bottom:-25px;
margin-top:10px;
padding-left:5px;
font-family:Arial;
font-size:12px;
padding-top:0px;
color:#ffffff;
text-decoration: none;
}

Voilà, j'ai pas mal cherché, mais je ne sais pas du tout d'où ça vient et mes connaissances css sont plutot limitées, ce qui n'aide pas !


Vous pouvez voir directement mon probleme sur cette adresse : lebbb [Sous IE6 bien entendu]


Comme vous pourrez le voir, j'ai également un problème au niveau des fichiers .png malgré l'application du correctif pour IE6 mais c'est un autre problème.

Merci d'avance !

Si vous avez besoin de plus de code, ou si vous n'avez comprit quelque chose n'hésitez pas.
Modifié par fabight (23 May 2008 - 16:02)

Personne n'a une idée ? :]