Eléments de menu décallés sous IE6 !

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 (28 May 2008 - 12:38)

Pas d'idée?

Salut fabight ,

Ben en l'état ça ne donne pas vraiment envie de se plonger dans le code : page invalide.

Pour commencer tu utilises un DOCTYPE Frameset alors que ta page ne contient aucune frame ...

Il faudrait sans doute repartir des bases et se reposer les questions plus tard.

a+