28173 sujets

CSS et mise en forme, CSS3

Width et z-index sont dans IE...

Bonjour,

Il n'est quasiment pas un jour de boulot où je ne découvre pas une nouvelle bizarrerie sous IE (et pourtant il y a déjà belle lurette que j'intègre des pages web...).

Alors aujourd'hui, je décide de rajouter une largeur à mon div #content pour qu'IE prenne en compte le background spécifié sur tout la hauteur dudit div (une bizarrerie d'IE découverte il y a maintenant quelque temps...).
Et là, misère ! voilà que je perd la propriété z-index spécifiée dans ce div :

#content { background:url(/images/common/fd_detail.gif) 0 0 repeat-y; z-index:1; position:relative; width:773px;  }


C'est à dire que j'ai un menu qui passe au-dessus de #content et qui disparaît dans IE quand je spécifie width:773px; et qui réapparaît si j'enlève cette propriété.

Celle-là, elle est forte, non ?

Si vous avez des pistes de résolution, je serais bien content, sinon tant pis!

@+

K
Bonjour,
ça m'a tout l'air d'un problème de hasLayout.
Ton élément en position:relative prends le layout quand tu lui donnes une largeur Smiley lol
Modifié par chmel (09 May 2006 - 12:41)
plutot une question de relative que haslayout etant donné que le probleme survient quand on fixe une largeur ce qui confere le layaout
ça revient au même Smiley cligne
La perte de z-index me semble bizarre, peut tu développer ?
Modifié par chmel (09 May 2006 - 12:46)
Je vais approfondir le concept de HasLayout (tant qu'il y aura des concepts Smiley smile )

Sinon, je tache de réexpliquer plus clairement mon problème :

ma page est structurée ainsi (pour le HTML 4.01, c'est une commande et pas un choix individuel...) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id="conteneur">
	<ul id="nav">
		<li id="menu_recherche"><a href="/default.aspx">Recherche de véhicule</a></li>
		<li id="menu_garanties"><a href="/nos_garanties/default.aspx">Nos Garanties</a></li>
		<li id="menu_reprise"><a href="/reprise_de_mon_vehicule/default.aspx">Reprise de mon véhicule</a></li>
		<li id="menu_qui"><a href="/qui_sommes_nous/default.aspx">Qui sommes nous ?</a>
			<ul>
				<li><a href="/qui_sommes_nous/default.aspx">Présentation</a></li>
				<li><a href="/qui_sommes_nous/nos_etablissements.aspx">Nos établissements</a></li>
				<li><a href="/qui_sommes_nous/contact.aspx">Contact</a></li>
			</ul>
		</li>		
	</ul>
	<div id="content">
		<div id="left"></div>
		<div id="right"></div>
		<div class="clear"></div>
	</div>
	<p id="footer"></p>
</div>
</body>
</html>


ma css pour le menu :

ul#nav {
	position:absolute;
	top:69px;
	left:0;
	list-style:none;
	height:28px;
	width:591px;
	background:#f96a15 url(/images/common/top/fd_menu.gif) right 0 no-repeat;
	margin:0;
	padding:0;
	z-index:2;
}
ul#nav li {
  float: left;
  position: relative;
	height:28px;
	margin:0;
	padding:0;
	text-align:center;
	z-index:3;
}
ul#nav li#menu_recherche { width:162px; background:url(/images/common/menu/fd_menu.gif) right 0 no-repeat; }
ul#nav li#menu_garanties { width:110px; background:url(/images/common/menu/fd_menu.gif) right 0 no-repeat; }
ul#nav li#menu_reprise { width:167px; background:url(/images/common/menu/fd_menu.gif) right 0 no-repeat; }
ul#nav li#menu_qui { width:143px; }

ul#nav li a {
  display:block;
  font-weight:bold;
  color:#fff;
	background:transparent;
  margin:0;
  padding:7px 0 0 0;
  text-decoration:none;
  height:28px;
  voice-family: "\"}\""; /* Box model hack */
  voice-family:inherit;
  height:21px;
	z-index:4;
}

ul#nav li a:hover, ul#nav li:hover a, ul#nav li.over a { /* cette formulation complete permet de garder la petite fleche quand on passe sur les sous-menus */ background:url(/images/common/menu/puce_menu.gif) center bottom no-repeat; z-index:5; }
ul#nav li.ici a { background:url(/images/common/menu/puce_menu.gif) center bottom no-repeat; z-index:5; }

ul#nav li ul {
  display: none;
  position: absolute; 
  top: 28px;
  left: 0;
  list-style:none;
  margin:0;
  padding:0;
  z-index:5;
}
ul#nav li > ul {
	top: auto;
	left: auto;
	}

ul#nav li:hover ul, ul#nav li.over ul { display: block; clear: left; z-index:6000; }
ul#nav ul li {
	height:28px;
	width:200px; 
	text-align:left;
	z-index:6;
}
ul#nav li#menu_qui ul li {
	width:144px; 
	background:#f96a15 url(/images/common/menu/fd_menu_qui.gif) 0 bottom no-repeat;
	z-index:6;
}
ul#nav li#menu_garanties ul li {
	background:#f96a15 url(/images/common/menu/fd_menu_garanties.gif) 0 bottom no-repeat;
	z-index:6;
}

ul#nav li#menu_garanties ul a, ul#nav li#menu_qui ul a { /* oblige de le formuler comme ca plutot que simplement "ul#nav ul a" car sinon heritage de "ul#nav li a:hover, ul#nav li:hover a, ul#nav li.over a" l'emporte */
  display:block;
  font-weight:bold;
  margin:0;
  padding:6px 0 0 10px;
  text-decoration:none;
  z-index:7;
  background:#f96a15 url(/images/common/shim.gif) 0 0 no-repeat; 
	color:#fff;
}
ul#nav li#menu_garanties ul a:hover, ul#nav li#menu_qui ul a:hover { /* toujours a cause de l'heritage */ background:#f96a15; color:#3a83b8; z-index:7; }


et donc quand j'écris dans ma feuille de style :

#content { background:url(/images/common/fd_detail.gif) 0 0 repeat-y; z-index:1; position:relative; width:773px;  }


(le position:relative; est là parce que je positionne des éléments en absolu à l'intérieur de #content ...)

au lieu de :

#content { background:url(/images/common/fd_detail.gif) 0 0 repeat-y; z-index:1; position:relative;  }


mes éléments de sous-menu disparaissent ("sous" #content pour ainsi dire)
et donc, c'est comme si IE ne tenait pas compte de z-index:1; quand je rajoute la largeur (largeur dont j'ai besoin sous IE pour que le background s'étale sur toute la hauteur de ses enfants #left et #right...)

Encore merci en tout cas pour les débuts de piste Smiley smile

K
Sujet clos
Aller à