Menu horizontal - problème compatibilité IE

Question

bn'ja123

24 Feb 2012 à 17:44

Bonjour à tous,

je cherche une aide pour la mise en page de mon menu horizontal car la je galère un peu.
Le code que j'utilise fonctionne parfaitement sous firefox et sous chrome mais j'ai de gros problème d'affichage sous IE (version 9 chez mwa).

Voici le code html



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

	<head>

<title></title>

<link rel="stylesheet" type="text/css" href="web/style3.css"> 

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="style2.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div id="barreMENU"> 
<ul id="menu"> 

<li>
<a href="">Services</a>
<ul class="menuderoulant">
<li><a href="">aide</a></li>
<li><a href="">aide2</a></li>
</ul>
</li>

<li>
<a href="">Formations</a>
<ul class="menuderoulant">
<li><a href="">formation1</a></li>
<li><a href="">formation2</a></li>
<li><a href="">formation3</a></li>
</ul>
</li>

</body>
</html>

Le code CSS dans un fichier externe (style3.css)



@charset "utf-8";
/* CSS Document */

body {

background-color: #33cc00;
height:100%;
}


#barreMENU {
			z-index: 2;
			margin-left: auto;
  			margin-right: auto;
			width: 800px;
			height: 62px;
			border-top: 1px solid #ffffff;
			border-left: 10px solid #ffff00;
			border-right: 10px solid #ffff00;
			background-color : #cccccc;
}

#menu {								
			width: 800px;            
			height: auto;           
			list-style-type: none; 
			margin-left: 6%;
			margin-top:0;
			font-size : 16px;
			text-align: center;
			padding: 0;           
			border: 0;      
	
	}

#menu > li                  
{
	float: left;           
	width: auto;          
	margin: 5px;           
	padding: 0;
	border: 0;
	
}

#menu li a                 
{
	display: block;       
	color: #000000;         
    background-color: #333333;          
	background-color: rgba(255, 255, 0, 0.8);     
	margin: 0;                               
	padding: 4px 8px;                         
	border-radius: 25px;
	border-left: 5px solid #ffffff;
	border-top: 5px solid #ffffff;
	border-right: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;              
	text-decoration: none;                    
	font-family: Neuropol,Verdana;

}

#menu li a:hover {                         
	background-color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.8);
	color:#ffffff;
}

#menu .menuderoulant       
{
	display: none;       
	list-style-type: none;  
	margin-left: 20px;              
	padding: 0;
	border: 0;
	position : absolute;

	
}
#menu .menuderoulant li         
{
	margin: 0;
	padding: 0;
	border: 0;
	width: auto;               
    border-top: 1px solid transparent;       
	border-right: 1px solid transparent;

}
#menu .menuderoulant li a        
{
	display: block;
	color: #000000;
	font-size : 14px;
	font-family: Verdana;
	margin: 0;
	border: 0;
	text-decoration: none;       
    background-color:#999999;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border-left: 3px solid #ffffff;
	border-top: 3px solid #ffffff;
	border-right: 3px solid #ffffff;
	border-bottom: 3px solid #ffffff; 
		
}
#menu .menuderoulant li a:hover       
{
	background-color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.8);
	color: #ffffff;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border-left: 5px solid #ffffff;
	border-top: 5px solid #ffffff;
	border-right: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff; 
}

#menu .menuderoulant li a:visited {         
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
	  	
}


#menu li:hover > .menuderoulant { display: block; }

Le code Css sensé résoudre les difficultés pour IE (style2.css)



@charset "utf-8";
/* CSS Document */


#menu li a { 

      background:transparent; 
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
      zoom:1;       /* important pour ie7*/
    }  
	
	#menu li a:hover {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
	zoom: 1;            /* important pour ie7*/
    }
	
	 #menu .menuderoulant li a {
	 background:transparent; 
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); 
       zoom: 1;            /* important pour ie7*/

    }  
	
	#menu .menuderoulant li a:hover {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
	zoom: 1;         /* important pour ie7*/

     }
	
	#menu .menuderoulant li a:visited {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
	zoom: 1;          /* important pour ie7*/

      }

Merci à tous pour votre aide !
Modifié par bn'ja123 (26 Feb 2012 - 23:19)

Azralth

24 Feb 2012 à 23:10

C'est quoi qui fonctionne pas, tu as une adresse ou on peux voir ?

Au passage, tu as oublié de fermer ta <div id="barreMENU"> Smiley biggrin

bn'ja123

26 Feb 2012 à 22:03

Salut, merci pour ton intérêt. Le site n'est pas encore en ligne... Smiley decu

En effet, div barre menu non fermée mais j'ai juste repris une partie de mon code Smiley smile

Il y a plusieurs problèmes sous IE 9 :

1) le menu ne se déroule pas
2) les différents éléments du premier niveau se placent les uns au dessus des autres et non les uns a coté des autres, comme si le "float left" n'était pas pris en compte.
3) la mise en forme "border radius" que je souhaite ne fonctionne pas

Voila encore merci ! Smiley cligne

Modifié par bn'ja123 (26 Feb 2012 - 22:04)

Azralth

27 Feb 2012 à 00:50

Salut,

en fait tu as plusieurs soucis,

d'abord tu ne ferme pas ta div barremenu, et tu ne ferme pas ton <ul id="menu">

Ensuite tu as plusieurs choses qui sont inutiles dans ton css puisque tu les répètes plusieurs fois.

le z-index dans #barremenu ne sert à rien. En fait les z-index sont à utiliser uniquement lorsqu'on utilise un position absolute. le margin-left et margin-right:auto, sont inutiles: Un simple margin:auto fait l'affaire.

Et d'une manière général tous tes padding et margin ou border:0 sont à viré. Utilise plutôt un reset css de Meyer comme ça tu pars de zero dans ton css et t'es tranquille.

Enfin, le soucis des border-radius et du sous-menu sur ie vient du fait que tu écris xml:lang="fr" au lieu de lang="fr". De plus évite les *>* quand tu souhaites attraper un élément fils.

Et dernier point pour l'optimisation, pas besoin d'utiliser une class pour tes sous-menu. un simple ul#menu ul suffit.

Allez en bonus je te met le code modifier et compatible tout navigateur sans passer par une feuille de styles spécifique a IE.
J'ai fais le plus gros mais j'imagine qu'il y a des optimisations à faire encore.


@charset "utf-8";

/* CSS Document */



body {



background-color: #33cc00;

height:100%;

}





#barremenu {

			margin:auto;
			width: 800px;
			height: 62px;
			border-top: 1px solid #ffffff;
			border-left: 10px solid #ffff00;
			border-right: 10px solid #ffff00;
			background-color : #cccccc;
}



ul#menu {								
			display:block;
			float:left;
			width: 800px; 
			height:auto;
			list-style-type: none; 
			margin-left: 6%;
			margin-top:0;
			font-size : 16px;
			text-align: center;
			z-index:5;
	}



ul#menu  li                  
{
	display:block;
	float: left;           
	margin:auto;          
	margin: 5px;           
}



#menu li a                 

{
	display: block;       
	height:auto;
	color: #000000;         
    background-color: #333333;          
	background-color: rgba(255, 255, 0, 0.8);                                 
	padding: 4px 8px;                         
	border-radius: 25px;
	border-left: 5px solid #ffffff;
	border-top: 5px solid #ffffff;
	border-right: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;              
	text-decoration: none;                    
	font-family: Neuropol,Verdana
}



#menu li a:hover {                         
	background-color: rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.8);
	color:#ffffff;
}



ul#menu ul     

{
	display: none; 
	z-index:6;
}

ul#menu  li:hover ul { 
	display: block;
	width:100px;      
	position : absolute;
	}

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" >

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<head>

<title>Titre</title>


<link rel="stylesheet" type="text/css" href="web/style3.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>



<div id="barremenu"> 

<ul id="menu"> 

<li>
	<a href="#">Services</a>
		<ul>
			<li><a href="">aide</a></li>
			<li><a href="">aide2</a></li>
		</ul>
</li>

<li>
	<a href="#">Formations</a>
		<ul>
			<li><a href="">formation1</a></li>
			<li><a href="">formation2</a></li>
			<li><a href="">formation3</a></li>
		</ul>
</li>
</ul>
</div>


</body>

</html>

Bon courage à toi.
Modifié par Tony Monast (27 Feb 2012 - 21:29)

bn'ja123

27 Feb 2012 à 08:18

wawww

, j'en demandais pas tant !!! Un grand merci pour ton travail t'es vraiment un chef ! Je teste le code cette après-midi et je te fais un feedback ce soir.

Bonne journée !

bn'ja123

27 Feb 2012 à 20:57

Re,

En fait j'ai essayé ton code. Le résultat était plus proche de celui désiré (mise en page "float left" ok) mais toujours le menu immobile.

Aprés recherches, j'ai trouvé une autre solution efficace pour tous mes problèmes. Il fallait simplement rajouter la balise :

<meta http-equiv="X-UA-Compatible" content="IE=9" />

ET la placer avant :

<link rel="stylesheet" type="text/css" href="web/style1.css">

En fait, c'est par la console d'outils F12 sur IE9 que j'ai trouvé le problème :

HTML1115: Balise META compatible X-UA ('IE=9') ignorée à cause d’un mode de document déjà finalisé.

et Microsoft nous dit (http://msdn.microsoft.com/fr-fr/library/hh180764%28v=vs.85%29.aspx):

En général, la balise "META" a été placée après une déclaration de "Script" ou de "Style", ce qui a annulé le mode document de la page(...)Déplacez la balise META compatible X-UA aussi haut que possible dans l’en-tête. Une bonne pratique consiste à la placer immédiatement après "<title>" et la valeur charset.

Voila, en tout cas un grand merci pour ton aide et pour tes conseils qui allégerons à nouveau un peu plus mon code...

Bien à toi.

Azralth

28 Feb 2012 à 20:21

C'est étrange j'avais testé mon code sur IE9 et ça fonctionnait nikel.
Bon en tout cas ravi que tu es trouvé une solution.

Sujet clos

CSS et mise en forme, CSS3

Menu horizontal - problème compatibilité IE