28172 sujets

CSS et mise en forme, CSS3

Problème de mise en forme entre FireFox et IE 7. De quelques pixels.

Bonsoir à tous ! Smiley smile

Alors j'aimerais avoir vos lumières sur un problème qui me chagrine. =/

Voilà, j'utilise margin-left pour placer mon menu déroulant, mais j'ai un problème. En effet sous FF et IE, il y a une différence de quelques pixels, mais ça change tout malheureusement. Smiley ohwell

Si vous aviez une solution pour qu'il n'y ai plus ce soucis. J'ai pensé au hack css mais j'aimerais les éviter. Sinon j'utiliserai un hack css et puis zut. 


CSS: 

#menuderoulant2 {  /*Infobulle Langues */
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	top: 0;
	left: 0;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	z-index:400;
	
}

#menuDeroulant2 li {
	float: left;
	margin-top: 0px;
	margin-left:-5px;
	padding:0 0px;
	z-index:400;;
}

#menuDeroulant2 .sousMenu2 {
	display: none;
	list-style-type: none;
 	z-index:400;
}

#menuDeroulant2 li:hover {
	margin-top: 0px;
	margin-left:-14px;
	margin-right: auto;
	z-index:400;
}
	
#menuDeroulant2 li:hover > .sousMenu2 { 
display: block; 
	margin-top: 0px;
	margin-left:-16px;
	padding:0px;
		z-index:400;
}

.sousMenu2 {
	list-style-type: none;
	text-align: center;
		z-index:400;
}

.sousMenu2 li {
	display: block ;
	margin-top: 40px;
		z-index:400;
}

#menuDeroulant2 .sousMenu2 li {
	float: left;
		z-index:400;

}

#menuDeroulant2 .sousMenu2 li a:link,
#menuDeroulant2 .sousMenu2 li a:visited {
	display: block;
	background: transparent;
		z-index:400;
}





HTML : 

<ul id="menuDeroulant2">    
    <li>
   	 <img src="images/sectpriv.gif" alt="Secteurs privilégiés" align="texttop" />
    <ul class="sousMenu2">
         <li>  
		 <a href="traduction2.html"><img src="images/apressen.gif" alt="" align="left" onmouseover="this.src='images/apresser.gif'" onmouseout="this.src='images/apressen.gif'" /><br /></a>
         <a href="traduction3.html"><img src="images/afinancen.gif" alt="" align="left" onmouseover="this.src='images/afinancer.gif'" onmouseout="this.src='images/afinancen.gif'" /><br /></a>
         <a href="loc.html"><img src="images/aedition.gif" alt="" align="left" onmouseover="this.src='images/aeditior.gif'" onmouseout="this.src='images/aedition.gif'" /></a> 
         </li> 
        </ul>
    </li>
    </ul>
Bonjour,

Pour obtenir des réponses, il faut fournir des éléments exploitables. Et de préférence exploitables facilement. Notamment:

1. S'assurer que le code HTML et CSS qui posent problème sont valides.
2. Tester avec au moins trois navigateurs pour savoir si le problème est relatif à un navigateur en particulier. Tester de préférence avec IE6 et IE7, et au mois deux autres navigateurs tels que Firefox, Opera, ou Safari.
3. Fournir l'URL d'une page de test en ligne ou l'adresse de la page qui pose problème si le site lui-même est déjà en ligne.
4. Décrire le problème rencontré de manière plus complète. À quel endroit observe-t-on ce décalage, quelles versions des navigateurs ont été utilisées pour les tests?
Salut,

Voilà, j'ai refait tout le CSS de ce menu déroulant et j'ai réussi à l'aide de margin-left à trouver un compromis qui permet d'avoir un menu clair sous FF et IE 7. Smiley smile

@+
Sujet clos
Aller à