28220 sujets

CSS et mise en forme, CSS3

[résolu]Décalage de menus IE/FF

Bonjour,

Je viens de créer un menu en css, en m'inspirant fortement du tuto du site pompage.
Le résultat obtenu me convient parfaitement dans FF, en revanche dans IE... il y a un décalage que je n'arrive pas à supprimer autrement qu'en le répercutant dans FF.
Le décalage intervient lorsque le menu se déroule, c'est à dire que le sous-menu se place juste en dessous du menu mais décalé vers la droite (il se place au centre du menu)
C'est peut être un problème simple, mais n'ayant que très peu d'expérience, je nage... enfin je me noie !! Smiley cligne

voilà le code concernant le menu:

HTML


<ul id="menuHo">
					<li><a href="#">Fougères</a></li>
					<li><a href="#">Mousses</a></li>
					<li><a href="#">Fleurs</a></li>
					<li><a href="#">Arbres</a>
						<ul>
							<li><a href="#">Feuillus</a>
								<ul>
									<li><a href="#">Rechercher</a></li>
									<li><a href="#">Liste</a></li>
									<li><a href="#">Familles</a>
										<ul>
											<li><a href="#">Acéracées</a></li>
											<li><a href="#">Fabacées</a>
											<li><a href="#">Bétulacées</a></li>
										</ul>
									</li>						
								</ul>
							</li>
							<li><a href="#">Résineux</a>
								<ul>
									<li><a href="#">Rechercher</a></li>
									<li><a href="#">Liste</a></li>
									<li><a href="#">Familles</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>


CSS




#menuHo {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 27px;
	height:27px;
	background: url(menu.jpg) repeat-x 0 -27px ;
	position:relative;
	top: 157px;
	text-align:center;
	
}
#menuHo ul {
	padding: 0;
	margin:0;
	list-style: none;
	text-align:left;
	position: absolute;
	left: -999em;
	width:147px;   /*float;right*/
	border-bottom: 1px solid #dea ;
	
}

#menuHo li {
	padding: 0;
	margin: 0;
	float: right;
	width: 147px;
	border-left: 2px solid #dea ;
	
}

#menuHo ul ul {
	
	margin: -15px 0 0 149px; 
	padding:0;
}

#menuHo a {
	margin:0;
	padding:0;
	display: block;
	width: 5em;
	width: 147px ;
	font-family:"trebuchet MS";
	font-size: 0.9em ;
	font-weight: bold ;
	letter-spacing: 3px ;
	color: #fff ;
	text-decoration:none ;
}

#menuHo ul a {
	margin:0;
	padding:0;
	width:149px;
 	line-height:20px;
	background: url(menu20.jpg) repeat-x 0 -20px ;
	font-size:0.7em;
}
#menuHo a:hover {
	background: url(menu.jpg) repeat-x 0 0 ;
	color:#6a7537;
	}
	
#menuHo ul a:hover {
	background: url(menu20.jpg) repeat-x 0 0 ;
	color:#6a7537;
	}
	




#menuHo li:hover ul, #menuHo li.sfhover ul {
	left:auto;
	
	
	
}
#menuHo li:hover ul ul, #menuHo li.sfhover ul ul {
	left: -999em;
	
	
}
#menuHo li:hover ul, #menuHo li li:hover ul, #menuHo li.sfhover ul, #menuHo li li.sfhover ul {
	left: auto;
}


#menuHo li:hover ul ul, #menuHo li:hover ul ul ul, #menuHo li.sfhover ul ul, #menuHo li.sfhover ul ul ul {
	left: -999em;
}

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



merci !
Modifié par Sboob (26 Aug 2006 - 14:49)
Modérateur
bonjour,

le decallage dans IE provient probablement du text-align:center; que tu applique au parent des elements positionné en absolue, , tu dois alors redefinir la position a partir de la gauche pour IE ,
a priori left:0;
++
merci pour la réponse Smiley cligne ,
mais malheureusement cela ne fonctionne pas.

Effectivement le text-align:center; "pose problème" puisque que lorsque je le supprime les sous menus se calent bien à gauche. Mais le texte des menus aussi... le fait de rajouter left:0; ne change rien.

le problème reste entier Smiley decu
Modérateur
bonjour,

A vrai dire , je ne perçois/visualise pas ton bug, les codes que tu propose ici inserer dans une page en xhtml 1.0 se comporte de la même maniere dans IE6 et ff .
un menu horizontal flottant a droite de la page et deplacé de 157 pixels du haut de la page .
sans le javascript associer pour le derouler , je ne vois pas pas trop.

je dirais qu'il faudrait deplace ton text-align center sur les balise a
comme ceci peut-etre :

#menuHo li a {text-align:center;}


si cela ne fonctionne pas , laisse nous voir sur quelle valeur css joue ton "javascript" .
Bingo !

Merci beaucoup.
En revanche, et malgré ce que j'ai pu lire ou ce qu'on m'a dit, je ne comprend pas tout.
Pourquoi si j'applique le text-align center à #menuHo ul a {} ça ne marche pas, alors que je m'adresse au niveau supérieur.

encore merci
Modérateur
bonsoir,

IE applique le text-align:center; comme si'il s'agissait de "l'obsolete" balise <center></center> et centre bien les textes mais aussi toutes les balises inline ou block .
une balise deposé en absolute dans la page (sortit du flux normal) n'a plus de dimension par rapport aux reste du contenu et IE va la "centré en positionnant son coin gauche au centre horizontal .
(Ce "defaut" apparait dans IE avec ou sans doctype valide.)

en testant ce code html dans Internet Explorer et un autre navigateur on perçoit de suite la difference d'interpretation que IE fait du text-align:center; par rapport aux autres.


<div style="text-align:center;">-- + --
<div style="width:50%;background:#eee;">-- + --</div>
<div style="width:30%;background:#aaa;">-- + --</div>
<div style="width:90%;background:#ccc;">-- + --</div>
<div style="width:200px;background:#f6d;position:absolute;"> -- + --</div>
</div>

C'est pourquoi , ce text-align:center; est applique en plus du margin:auto; pour obtenir l'effet de centrage dans certaines version de IE ou absence de doctype valide.

Pour ensuite annhiler ce defaut , il faut utiliser un conteneur supplementaire et redonner un text-align:left; , en cas de centrage horizontal pour une zone , ou alors distribuer le text- align: center; qu'aux balises enfants ou l'ont veut voir le texte centré.

pour les elements en position:absolute; il faudra compensé le "defaut de depart au centre par un left:0; (prevoir aussi selon les cas de positionner en relatif le parent d'ou s'applique le "text-align:center; pour repositionné a gauche dans le parent conteneur et pas de la fenetre , si le parent par exemple est flottant a droite ou en marge de la page ).

Si le conteneur a une position decallé du bord de la page "connue" , alors il est possible de donné cette valeur a l: eft:xx; et ne pas appliqué de le position:relative; au parent.

Ces surcharge css devrait n'etre appliqué qu'a IE, à l'aide de commentaires conditionnels par exemple.

heu : exemple:




<div id="conteneur_ancetre"
   <p>text-align:left; c'est la valeur par defaut</p>
       <div id="conteneurcentre" >
           <p>text-align:center</p>	
           <div id="contenuabsolu" >
              <p>absolu</p>
           </div>
       </div>
</div>
et les css a appliqués (mettre ou sortir des commentaires les differentes valeurs pour test )
#conteneur_ancetre {
/* les valeurs par defaut pour une balise de type block sont : width:100% et text-align:left;  */       

}

#conteneurcentre{
        text-align:center;
        width:500px;
        margin-left:50px;/* ou un float:right; */
        background:#bbb;
/* pour IE */
        position:relative; /* essayez avec et sans */
}
#contenuabsolu {
         width:500px;
         background:#f6d;
         position:absolute;
/* pour IE */
         left:0; /* essayez avec et sans , ou */

         /* left:50px; en enlevant le  position:relative; du #conteneurcentre */ 
}


je me suis relue , ... j'ai donc remis des morceaux a tester .

++
Sujet clos
Aller à