28173 sujets

CSS et mise en forme, CSS3

Problème superposition entre deux blocs.

Salut,
j'ai un problème de compatibilité entre notre amis ie6 et les navigateurs de nouvelle génération ( firefox , ie7, opera etc...).

Sur les récents j'ai mis en place une page comportant un logo centré au milieu de la plage et un menu qui est superposé sur le menu.

Le problème est que sous ie6 ce menu disparaît sous le logo :s
J'ai essayé de magouiller avec les histoires de calque ( z-index ) mais rien ne marche.

Voici le code:


body {
  background: #fff;
  color:#000;
  font:small Georgia,Serif;
 _font:x-small
  } 

#header {
  float:left;
  width:100.3%;
  /*background:#DAE0D2 /*url("./b.jpg") /repeat-x bottom;*/
  font-size:93%;
  margin-top: -35px;
  line-height:normal;
  }
#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#header li {
  float:left;
  background:url("./left.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#header a {
  float:left;
  display:block;
  background:url("./right.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
  }
#header #current {
  background-image:url("./left_on.gif");
  }
#header #current a {
  background-image:url("./right_on.gif");
  color:#333;
  padding-bottom:5px;
  }
  
  #global
  {
	margin-left: 200px;
	margin-right: 10px;
	width: 848px;
  }
  
  #bloc_logo
  {
	  position: relative;
	  background: none;
	  width: 100%;
	  display: block;
	  font: verdana 12px;
	  text-align: center;
  }
  
  #bloc_menu
  {
	  position: relative;
	  display: block;
	  width: 100%;
  }


Le code html:

<body>
	<div id="global">
		<div id="bloc_logo"><img src="b.jpg" /></div>
		<div id="bloc_menu">
			<div id="header">
			  <ul>
			    <li id="current"><a href="colloque_composite-inscription.php">Inscription</a></li>
			    <li><a href="programme.html">Programme</a></li>
			    <li><a href="plan.html">Plan</a></li>
			    <li><a href="contact.html">Contact</a></li>
			  </ul>
			</div>
		</div>
                ...


Merci d'avance pour votre aide Smiley smile
Modifié par enzO (06 Aug 2007 - 11:26)
Bonjour,

Quelques remarques:
1. une page en ligne pour qu'on puisse constater ça de visu?
2. le z-index n'est actif que pour les éléments positionnés (en absolu, fixe ou relatif);
3. les hacks, c'est le mal... voir la FAQ du forum à ce sujet, et penser aux commentaires conditionnels pour IE Win.
Sujet clos
Aller à