[Résolu]Pb de compatibilité IE7 d'un menu déroulant

Bonjour à tous,

j'ai un soucis avec IE7
http://www.sauret-piecesauto.fr/


sous IE7 mon menu déroulant sous "Atelier" est caché sous la bannière alors que pour FF et même IE6 ça marche nickel !
pour le menu déroulant j'utilise droppy jquery (http://onehackoranother.com/projects/jquery/droppy/)
et pour ma bannière j'utilise innerfade jquery

Voici mon code CSS pour le menu

/* Basic code - don't modify */
 
#nav { 
	display: block; 
	margin: 0; 
	padding: 0; 
	position: relative; 
}

* html #nav { 
	z-index: 3;	 /* IE6 "fix" */
} 

#nav li { 
	display: block; 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	float: left; 
	position: relative; 
}

#nav a { 
	display: block; 
}

#nav ul { 
	display: none; 
	position: absolute; 
	left: 0; 
	margin: 0; 
	padding: 0; 
}

* html #nav ul { 
	line-height: 0;	 /* IE6 "fix" */
} 

#nav ul a { 
	zoom: 1;   /* IE6/7 fix */
} 

#nav ul li { 
	float: none; 
}

#nav ul ul { 
	top: 0; 
}
    
/* Essentials - configure this */

#nav ul { 
	width: 176px; 
}

#nav ul ul { 
	left: 179px; 
}

/* Everything else is theming */
 
#nav { 
	height: 32px; 
}

#nav li.menu-item {
	background: none;
	cursor: pointer;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000066;
}
#nav li.menu-last-item {
	background: none;
	cursor: pointer;
	border-right: none;
}

#nav li {
	background: none;
	cursor: pointer;
}


#nav *:hover {
	color: #FFFFFF;
	background: url(../images/grad-1.gif) repeat-x top #2B6484;
}

#nav li a.active,
#nav li a.active:hover,
#nav li a.active:active,
#nav li a.active:focus {
	color: #FFFFFF;
	background-color: #e0ca40;
}

#nav a { 
	text-decoration: none;
	line-height: 32px;
	padding: 0 17px;
	color: #C3DBED;
	font-size: 12px;
	font-weight: bold;
	border-right: 1px solid #2B6484;
}
#nav a.last { 
	text-decoration: none;
	line-height: 32px;
	padding: 0 21px 0 20px;
	color: #C3DBED;
	font-size: 12px;
	font-weight: bold;
	border-right: none;
}
#nav li ul { 
	top: 32px;
	border: 1px solid #CCCCCC;
}

#nav ul li a { 
	background-color: #29457b;
	border: none; 
	line-height: 30px;
	padding: 0 10px;
}

#nav ul a {
	opacity: 0.9; 
	filter: alpha(opacity=90); 
}
/* #nav ul a { border-bottom: none; } - I also needed this for IE6/7 */

Mon code CSS pour la structure du site

* { 
	margin: 0px;          
    padding: 0px;                       
}

.clear{
	clear:both;
}

img {
	border: 0;
}

a {
	color: #333333;
	text-decoration: underline;
}

a:hover, a:active, a:focus {
	color: #333333;
	text-decoration: underline;
}

a:hover, a:active, a:focus {
	color: #333333;
	text-decoration: underline;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-align: center;
	font-size: 12px;
	background-color: #FFFFFF;
}

.container {
	width: 800px;
	margin: 0 auto;
	text-align: left;
}
/*------------------------------------------------------- */

/* HEADER

--------------------------------------------------------- */
#header {
	height: 82px;
	line-height: normal;
	position: relative;
	background: url(../images/header-bg.gif) no-repeat #505050;
	margin-bottom: 8px;
}
h1#logo {
	width: 150px;
	height: 45px;
	position: absolute;
	top: 22px;
	left: 10px;
}
h1#logo a {
	width: 150px;
	height: 45px;
	display: block;
	background: url(../images/logo.png) no-repeat;
	color: #FFFFFF;
	text-transform: uppercase;
	text-indent: -5000px;
}
#header p.site-slogan {
	width: 370px; 
	height: 25px;
	position: absolute;
	top: 39px;
	right: 10px;
	background: url(../images/tagline.gif) no-repeat; 
	text-indent: -4000px;
}

/*------------------------------------------------------- */

/* NAVIGATION

--------------------------------------------------------- */
#navmain {
	background-color: #2b4578;
	width: 100%;
	height: 32px;
}
#navshadow {
	width: 800px;
	height: 10px;
	margin: 0 auto;
	background: url(../images/mn-sd-bg.gif) repeat-x top left;
}

/*------------------------------------------------------- */

/* BANNERSHOW

--------------------------------------------------------- */
#bannerwrap {
	background: url(../images/banner-bg.gif) repeat-x top left;
}
/*------------------------------------------------------- */

D'avance merci a vous pour votre aide.
Modifié par Francisco (17 Oct 2008 - 00:10)

Bonjour Francisco,

* html #nav { 
	z-index: 3;	 /* IE6 "fix" */
} 

Peut-être qu'IE7 aimerait également avoir une niveau d'empilement ?

#nav { 
	display: block; 
	margin: 0; 
	padding: 0; 
	position: relative; 
	z-index:3;
}

Auquel cas l'instruction pour IE6 deviendrait obsolète (à ce propos

A essayer

Cdt,
Sylvain

Salut Sylvain
merci de ton aide
j'ai essayé ta solution et effectivement ça marche pour IE7 et IE6 mais .... ensuite ça ne marche plus sur FF ou Opera !
si je supprime ma bannière, tout marche nickel même sans préciser de Z-index!

Re,

Francisco a écrit :
Salut Sylvain
merci de ton aide
j'ai essayé ta solution et effectivement ça marche pour IE7 et IE6 mais .... ensuite ça ne marche plus sur FF ou Opera !

Effectivement, je n'avais pas vérifié en profondeur, en fait cela fonctionne, mais plutôt moyennement, et c'est la même chose pour Safari...

Solution un :
Adresser le z-index à IE via commentaire conditionnel:

<!--[if IE]>
<style type="text/css" media="screen">
#nav { 
z-index:3;
}
</style>
<![ endif]--> [#blue]sans espace avant endif[/#]

Deuxième solution, et cela correspond à ma toute première idée :
Virer ce script de m**** et en installer un autre moins problématique

Cela ne devrait pas être difficile à trouver, même chez jquery

Cdt,
Sylvain
Modifié par 6l20 (14 Oct 2008 - 15:22)

Ouais Sylvain je crois que tu as raison je vais virer ce satané script (même si j'aimais bien l'effet sympa du menu déroulant !).
A moins que je ne vire le script innerfade gérant ma bannière car si je la supprime je n'ai plus de pb de superposition avec mon "maincontent" !???
En tout cas merci bien pour ta précieuse aide, c'est très sympa.

Francisco a écrit :
Ouais Sylvain je crois que tu as raison je vais virer ce satané script (même si j'aimais bien l'effet sympa du menu déroulant !).
A moins que je ne vire le script innerfade gérant ma bannière car si je la supprime je n'ai plus de pb de superposition avec mon "maincontent" !???
En tout cas merci bien pour ta précieuse aide, c'est très sympa.

Je parlais bien d'InnerFade (ceci dit le joli menu n'est pas tout à fait parfait, pas d'accés au sous-menu lorsque javascript est desactivé, innaccesible au clavier... )
Mais je n'ai aucune certitude sur le bon fonctionnement de ton menu avec un autre slideshow...

Ceci étant dit, en adressant le z-index à IE via commentaire conditionnel, tout fonctionne "parfaitement"

Tiens, en passant, un lien vers le plugin cycle de jquery (basé sur InnerFade ) je l'utilise parfois, tu peux éventuellement tester avec ton menu déroulant

Cdt,
Sylvain

Merci pour le lien il est vraiment sympa ce slideshow.
J'ai viré mon InnerFade pour Cycle et nickel ça marche...sauf pour Opera !
Donc en fait j'ai fait un mix de tes 2 solutions : Cycle + Commentaire conditionnel.
J'ai testé en local et apparemment tout fonctionne.
Merci bien pour ton aide.

J'ai pas testé, mais ça devrait marcher si ça allait avant sur tout sauf IE:

/* IE<7, IE7 "fix" */
* html #nav, *+html #nav { 

	z-index: 3;	 

}

Francisco a écrit :
Merci pour le lien il est vraiment sympa ce slideshow.
J'ai viré mon InnerFade pour Cycle et nickel ça marche...sauf pour Opera !
Donc en fait j'ai fait un mix de tes 2 solutions : Cycle + Commentaire conditionnel.
J'ai testé en local et apparemment tout fonctionne.
Merci bien pour ton aide.

Parfait
Tu considères ce sujet comme [résolu]

Bonne continuation,
Cdt,
Sylvain

Calak a écrit :
J'ai pas testé, mais ça devrait marcher si ça allait avant sur tout sauf IE

Il serait bien d'éviter de proposer des contournements par ces immondices.

Il serait bien de proposer des solutions au lieu de critiquer.

Calak a écrit :
Il serait bien de proposer des solutions au lieu de critiquer.

Il ne s'agissait pas de proposer ou de ne pas proposer une solution ... il s'agit de donner une solution robuste et non une solution bidouillée n'assurant pas la pérennité du code.