28173 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant et liste déroulante sous IE6

Bonjour
J'ai recherché sur le forum mais je n'ai pas trouvé de sujet qui corresponde à mon problème sous IE 6.0 :
J'ai un menu déroulant (z-index: 100;) qui affiche bien le sous-menu sur la page en dessous lorsque qu'elle contient du texte ou une image mais qui ne fonctionne plus lorsque le sous-menu doit s'ouvrir sur une liste déroulante : dans ce cas le sous-menu est recouvert par la liste.

Voici ma page en test : http://papapetch.free.fr/fort/fr/accueil.html

et voici le code du CSS (200 lignes c'est un peu long, mais je ne sais pas sur quelle partie devra porter la correction) :

html, body {
	margin: 0; 
	padding: 0; 
	height: 100%;
	}
body {
	text-align: center;
	font: 1em "Verdana", helvetica, sans-serif ;
	background: url(../images/carbone_4px.jpg) repeat left top;
	}
#prechargement {
	display: none;
	}
#conteneur {
	position: relative;
	margin-left: auto ;
	margin-right: auto ;
	width: 770px;
	text-align: left ;
	background: url(../images/fond_page_jaune.jpg) repeat-y left top;
	}
#lien_langue {
	position: absolute; 
	top: 72px;
	margin: 0px 0px 0px 32px;
	text-decoration: none;
	}
/*#menu img {
	border: 0px;
	}	*/
#menu {
	position: absolute; 
	top: 124px;
	right: 0px;
	z-index: 100;
	width: 763px;
	}
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#menu dl {
	float: right;
	width: 109px;
	}
#menu dt {
/*	display: block;
	width: 140px;
	height: 30px;
	background-repeat: no-repeat;	*/
	cursor: pointer;
	}
#menu dt a {
	display: block;
	width: 109px;
	height: 22px;
	}
a.menu_accueil {
	background:  url(../images/btn_accueil_off.gif) no-repeat;
	}
.menu_accueil_on, a.menu_accueil:hover, a.menu_accueil:focus  {
	background:  url(../images/btn_accueil_on.gif) no-repeat;
	}	
a.menu_hommes {
	background:  url(../images/btn_hommes_off.gif) no-repeat;
	}
.menu_hommes_on, a.menu_hommes:hover, a.menu_hommes:focus {
	background:  url(../images/btn_hommes_on.gif) no-repeat;
	}
a.menu_historique {
	background:  url(../images/btn_historique_off.gif) no-repeat;
	}
.menu_historique_on, a.menu_historique:hover, a.menu_historique:focus {
	background:  url(../images/btn_historique_on.gif) no-repeat;
	}
a.menu_machines {
	background:  url(../images/btn_machines_off.gif) no-repeat;
	}
.menu_machines_on, a.menu_machines:hover, a.menu_machines:focus {
	background:  url(../images/btn_machines_on.gif) no-repeat;
	}
a.menu_partenaires {
	background:  url(../images/btn_partenaires_off.gif) no-repeat;
	}
.menu_partenaires_on, a.menu_partenaires:hover, a.menu_partenaires:focus {
	background:  url(../images/btn_partenaires_on.gif) no-repeat;
	}
a.menu_presse {
	background:  url(../images/btn_presse_off.gif) no-repeat;
	}
.menu_presse_on, a.menu_presse:hover, a.menu_presse:focus {
	background:  url(../images/btn_presse_on.gif) no-repeat;
	}
a.menu_photos {
	background:  url(../images/btn_photos_off.gif) no-repeat;
	}
.menu_photos_photos, a.menu_photos:hover, a.menu_photos:focus {
	background:  url(../images/btn_photos_on.gif) no-repeat;
	}
#menu dd {
	display: none;
	background:  #bbb;
	}
#menu ul {	
	background:	#bbb;	/* pour afficher les sous-menus dans IE6 !!! */
	}
#menu li {
	text-align: center;
	font: 0.7em "Arial", helvetica, sans-serif ;
	line-height: 1.5em ;
	}
#menu li a, #menu dt a {
	color: #000;	
	text-decoration: none;
	display: block;	
/*	height: 100%;		*/
	}
#menu li a:hover, #menu li a:focus {
	background: #eee;	
	}
#colonnes {
	position: relative;
	z-index: 1;
	left : 0px;
	width: 770px;
	color: #000;
	}
.suite {
	margin: 0px 10px 0px 0px;
	text-align: right;
	font: 0.6em "Arial", helvetica, sans-serif ;
	}
#colonne1 {
	float: left;
	width: 120px;
	text-align: center;
	}
#colonne1 img {
	margin: 0px auto 15px;
	}
#colonne2 {
	float: right;
	width: 200px;
	text-align: center;
	}
#colonne2 div {
	margin: 0px 0px 2px 5px;
	border-left: 1px solid black ;	
	}
#colonne2 ul {
	margin: 0px ;
	list-style-type: disc;
	text-align: left; 
	font: 0.7em "Verdana", helvetica, sans-serif ;
	}
.titre_c2 {
	padding: 0;
	margin: 0px 0px 5px 0px;
	}
.image_c2 {
	margin: 0px auto 5px auto;
	text-align: center; 
	}
.texte_c2 {
	margin: 0px 10px 0px 10px; 
	text-align: justify;
	font: 0.7em "Verdana", helvetica, sans-serif ;
	}
.choix_2 {
	font: 0.6em "Verdana", helvetica, sans-serif ;
	width: 190px;
	background-color: yellow;
	}
#centre {
	margin-left: 120px;
	margin-right: 200px;
	}
.texte {
	margin: 0px 10px 0px 10px;
	text-align: justify;
	font: 0.7em "Verdana", helvetica, sans-serif ;
	color: #303030;
	}
.choix {
	margin-left: 50px;
	width: 350px;
	background-color: yellow;
	}
#piedpage1 {
	height: 20px;	
	clear: both;
	}	
#piedpage2 {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	text-align: center;
	line-height: 1.5em;
	font: 0.6em "Arial",Arial,sans-serif ;
	background: url(../images/fond_page_jaune.jpg) repeat-y left top;
	}


J'ai quelques erreurs à la validation mais elles ne me semblent pas être la cause de ce dysfonctionnement.
Merci pour votre aide (et vos critiques sur le code).
Modifié par Papapetch (28 Nov 2007 - 10:52)
Oui, l'élément select (entre autres je crois) sera toujours au dessus des autres sur IE6. Une des solutions (ou peut-être LA solution) est de cacher ces éléments quand tu utilises le menu...
Merci pour ton idée
En fait, la colonne sur laquelle j'ai ce problème comporte plusieurs sujets.
Je vais modifier l'ordre de ces sujets pour que le liste déroulante ne soit pas directement sous le menu
Sujet clos
Aller à