28220 sujets

CSS et mise en forme, CSS3

IE 5 : width en pourcentage dans un enfant

Sous IE 5, lorsque je précise width à 49%, je récupère 49% de la largeur du document et non 49% du conteneur.

Comment remédier à ce problème ?

Code HTML

  <body>
    <div id="conteneur">
      <div id="header">
        header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les modèles)</a>
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="gauche">
        <p>
          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="droite">
        <p>
          menu droit
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:right;</code>
        </p>
        <ul id="menudroit">
          <li>
            <a href="#">Menu 1</a>
          </li>
        </ul>
      </div>
      <div id="centre">
			<div class="boite_droite">
				test test test test test test test test test test test test test test test <br />
				test test test test test test test test test test test test test test test <br />
				test test test test test test test test test test test test test test test <br />
				test test test test test test test test test test test test test test test
			</div>
			<div class="boite_gauche">
				test test test test test test test test test test test test test test test <br />
			</div>
      </div>
      <div id="pied">
        pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
      </div>
    </div>
  </body>


Code CSS :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}

.boite_gauche {
	background-color: blue;
	float: left;
	width: 49%;
}

.boite_droite {
	background-color: green;
	float: right;
	width: 49%;
}


Merci d'avance
Apparemment ça marcherait sous IE 5 en mettant :

#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
[b]width: 100%;[/b]
}


Mais du coup, ça fonctionne plus du tout pour les autres navigateurs...
Modifié par nicolas.charlot (16 Sep 2005 - 15:14)
Bonsoir,

Quand un conteneur n'est pas doté de l'état de layout (propre à IE Windows), IE Win se réfère au plus proche ancêtre doté de cet état, et à défaut, au bloc conteneur initial généré par l'élément body (qui est toujours doté de layout). C'est que qui t'arrive.

Différentes propriétés CSS confèrent le layout à un élément, dont width (d'où la solution ci-dessus). Mais elles ont généralement des effets de bords dans les autres navigateurs, sinon dans IE lui-même.

Pour résoudre le problème, utiliser une de ces propriétés dans une CSS mise en commentaires conditionnels afin de la réserver strictement à IE Windows 5.x et 6.0 (voir la FAQ du forum sur les commentaires conditionnels pour la syntaxe à utiliser).

La propriété la plus indiquée serait height: 1% si IE5.0 doit être pris en compte. Sinon, zoom: 1 pour IE5.5 et 6.0.
Modifié par Laurent Denis (16 Sep 2005 - 19:38)
Sujet clos
Aller à