Sous-menu et background

Bonjour tout le monde,

j'ai un petit problème sur mon menu. Le background des sous-menu sur Firefox est bien comme je le veux mais sur IE, il n'est pas correcte et je vois pas pourquoi

je veux en fait que le premier niveau de mon menu soit en dégradé puis le sous-menu en couleur fixe.

Voilà comment j'ai fait :
css :

.menu_over a /*Contenu des listes*/ {
	display: block;
	padding: 0;
	color: #363534;
	text-decoration: none;
	width: 165px;
	background: -moz-radial-gradient(#FCDC5D, #FFF);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FCE794),
		color-stop(1, #FFFEFC) ); /* Safari & Chrome */
	filter: progid:     
	DXImageTransform.Microsoft.gradient(GradientType=  0, startColorstr='#FCE794',
		endColorstr='#FFFEFC' ); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FCE794', endColorstr='#FFFEFC')"; /* IE8 */
}

.sub_menu a {
	background: #FFF3C1;
}

html :

<ul id="menu">
   <li class="menu_over"><a href="#">Menu 1</a>
      <ul>
         <li class="sub_menu"><a href="#">Menu 1.1</a>
	    <ul>
		<li><a href="#">Menu 1.1.1</a></li>
		<li><a href="#">menu 1.1.2</a></li>
	    </ul>
        </li>
      </ul>
   </li>
</ul>

les sous-menus (1er et 2ème niveau) sous IE sont les mêmes que les menus contrairement sous Firefox où les sous-menus ont bien la couleur #FFF3C1.

merci par avance pour votre aide

Bonjour,

je pense qu'il faut que tu neutralise le filter dont hérite ton sous-menu.

Ta déclaration 'background: #FFF3C1' écrase la propriété background or le fond est appliqué sous IE7 via 'filter: progid: ...'.

C'est pas si méchant que ça en a l'air.

Ju

Peux-tu m'expliquer un peu mieux ce que tu veux dire par "neutralise le filter dont hérite ton sous-menu" ?

J'effectue le test sous Internet Explorer 8.

Sous Firefox, le navigateur interprète ton css de la sorte :

.menu_over a {
	background: -moz-radial-gradient(#FCDC5D, #FFF);                => 1
}
.sub_menu a {
	background: #FFF3C1;                                                       => 2
}

Les 2 déclarations jouent sur la même propriété : background. 2 étant écrite après 1, celle-ci prend le dessus.

Sous IE (7peu importe la version) :

.menu_over a {
	filter: progid:     
	DXImageTransform.Microsoft.gradient(GradientType=  0, startColorstr='#FCE794',
		endColorstr='#FFFEFC' ); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FCE794', endColorstr='#FFFEFC')"; /* IE8 */
}
.sub_menu a {
	background: #FFF3C1;                                                      
}

Il n'est dit nulle part que '.sub_menu a' a sa propriété filter nulle. En sachant que bien souvent les filter prennent le dessus sur le css "normal".

C'est un peu comme si tu avais :

.sub_menu a {
        filter: progid:     
	DXImageTransform.Microsoft.gradient(GradientType=  0, startColorstr='#FCE794',
		endColorstr='#FFFEFC' ); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FCE794', endColorstr='#FFFEFC')"; /* IE8 */
	background: #FFF3C1;                                                      
}

En gros ton background est bien appliqué mais le filter hérité de '.menu_over a' prend le dessus. Peut-être qu'un 'filter:none' & un '-ms-filter:none' régleront le problème.

En espérant avoir été clair
Modifié par Julien Optea (23 Jul 2012 - 14:22)