28234 sujets

CSS et mise en forme, CSS3

Problème de menu sous IE

je refais entièrement le CSS de mon site web mais je me heurt à un problème de z-index sur IE 7, même avec un z-index de 9999 celui-ci refuse de ce mettre au premier plan


/* CSS 3 Modification Menu */

.csstrois_menu {
	font-weight: bold;
	display: inline-block;
	position:relative;
	width:100%;
	margin:0px auto;
}

.csstrois_categories {
	position:relative;
	background: #c51227;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from (#b0000d), to (#d32a41));
	background: -webkit-linear-gradient(#b0000d,#d32a41);
	background: -moz-linear-gradient(#b0000d,#d32a41);
	background: linear-gradient(#b0000d,#d32a41);
	border-top:#FFF solid 2px;
	-moz-box-shadow: 0 0 8px #555;
	-webkit-box-shadow: 0 0 8px #555;
	box-shadow: 0 0 8px #555;
}

.ie8 .csstrois_categories {
	border-bottom:#FFF solid 2px;
}

.csstrois_pages {
	width:100%;
	background: #CCC;
	border-top:#FFF solid 2px;
	border-bottom:#FFF solid 2px;
}

.ie8 .csstrois_pages {	
	border-top:none;
}

.csstrois_pages:after {
	content: " ";
	position: absolute;
	width: 50%;
	height: 28px;
	z-index: -10;
}

.csstrois_pages:after {
	height:15px;
	width:100%;
}

.csstrois_shadow-bottom:after {
	top: 0px;
	left: 0%;
	width: 100%;
	height: 21px;
	-moz-box-shadow: 0 0 8px #555;
	-webkit-box-shadow: 0 0 8px #555;
	box-shadow: 0 0 8px #555;
}

.csstrois_IE-shadow-bottom {
	width:100%;
	height:3px;
	background:url(./images/cat_bg.jpg) repeat-x bottom;
}

.csstrois_IE-shadow-top {
	width:100%;
	height:3px;
	background:url(./images/cat_bg.jpg) repeat-x top;
}


.csstrois_menu nav,.csstrois_menu ul {
	width:1090px;
	margin:0px auto;
}

.csstrois_menu ul ul {
	width:auto;
	margin:0px auto;
}

.ie6 .csstrois_menu ul, .ie7 .csstrois_menu ul, .ie8 .csstrois_menu ul {
	zoom:1;
}

.csstrois_categories ul,.csstrois_categories li {
	line-height:50px;
}

.csstrois_categories a, .csstrois_pages a, .csstrois_categories a:visited, .csstrois_pages a:visited, .csstrois_categories a:hover, .csstrois_pages a:hover {
	display:block;
	text-decoration: none;
	color:#FFF;
	text-shadow:1px 1px 0 #515151;
	font-size: 12px;
	font-weight: 700;
	font-family: "Arial";
	padding:0 10px;
}

.csstrois_pages li:first-child a {
	padding:0 10px 0 0;
}

.csstrois_pages a,.csstrois_pages a:visited {
	line-height: 20px;
	font-size: 11px;
	padding:0 10px;
	color:#565656;
	text-shadow: none;
}

.csstrois_categories li:hover {
	color:#CCC;
}

.csstrois_pages a:hover {
	color: #3b3b3b;
	font-size: 11px;
	padding:0 10px;
	text-shadow: none;
}

.csstrois_categories li, .csstrois_pages li {
	display:inline-block;
}

.ie7 .csstrois_pages li, .ie7 .csstrois_categories > nav > ul > li {
	float:left;
	zoom:1;
}

.csstrois_categories ul ul{
	background: #d32a41;
	border-left:2px #FFF solid;
	border-right:2px #FFF solid;
	border-bottom:2px #FFF solid;
	border-radius:0px 0px 10px 10px;
	padding:0px 5px;
	display:none;
}

.ie7 .csstrois_categories ul ul, .ie8 .csstrois_categories ul ul, .ie9 .csstrois_categories ul ul{
	background: #c51227;
}

.csstrois_categories li:hover ul{
	text-align:left;
	display: block;
	padding:4px;
	position:absolute;
	z-index:10000;
}

.csstrois_categories li:hover li {
	display: list-item;
	padding:4px;
	line-height: 14px;
	list-style-type: none;
	text-indent:0px;
}

.csstrois_categories li:hover ul a {
	padding:4px;
}

.csstrois_categories li:hover ul a:hover {
	color:#c51227;
	width:auto;
	background-color: #FFF;
	border-radius:5px;
}

.ie7 .csstrois_categories li:hover ul a:hover {
	zoom:1;
}

#csstrois_accueil {
	margin:0 5px 0 0;
	padding:0;
	width:25px;
}

/* Page Navigation End */

#menu-item-27341 {
text-indent:8px;
background:url(./images/flag-ru.png) no-repeat left 17px;
}

#csstrois_accueil a {
	width:25px;
	margin:0;
	padding:0;
	background-image:url('./images/home.png');
	background-repeat: no-repeat;
}

#csstrois_accueil a:hover {
	background-position-y: -2px;
}

.csstrois_categories img {
	margin:0;
	padding:0;
	border:none;
	height:42px;
}


c'est surement une erreur mais je ne trouve de solution Smiley bawling
Bonjour,

j'ai pas la motiv' de lire tout ça, mais le problème d'IE7 et z-index est (extrêmement) documenté, que ce soit sur le forum ou sur Google...
Au hasard, tes éléments sont bien positionnés en relatif ou absolu ? Si oui, tente de positionner leurs parents également, ça améliore souvent la compréhension d'IE7.

Bon courage !
mon problème c'est que j'ai le sous-menu qui passe toujours sous une parti du site seulement sur IE 7 exclusivement partie central avec le slideshow et la deuxième bar de menu pour les liens pratique ou d'information par contre sur les versions au dessus pas de problème tout s'affiche correctement

le ul contenant le sous menu

tester avec IEtester
Si j'ai bien compris ton problème, le SOUS menu s'affiche en DESSOUS de ton CONTENT, dans ce cas, tu essaie de :
- mettre un relative à TOn 'header' + z-index : 2 ( par ex )
- ton content, ne doit pas avoir un z-index supérieur à celui de HEADER

Voilà
Sujet clos
Aller à