28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche une confirmation d'un supposé bug de FF (v1.0.7) sur la propriété width ou bien d'un comportement normal lié à l'usage du positionnement absolu.

CSS
#globalcontainer{
width:90%;
}
#globalheader{
width:100%;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
background-color:yellow;
position:absolute;
}
#conteneur{
position:absolute;
width:100%;
background-color:#ffcc00;
clear:both;
top:15em; /*hauteur supposé header*/
margin-left:5px;
margin-right:5px;
border :solid 1px black;
}
HTML
<body id="toto">
<div id="globalcontainer">
<div id="globalheader">
<p>texte contenu dans le globalheader</p>
</div>
<div class="conteneur">
<p>texte contenu dans le conteneur</p>
</div> <!-- fin conteneur -->
</div> <!-- fin globalcontainer -->
</body>

Sous FF :
le conteneur déborde allègrement sur la droite. Ce comportement n'apparait pas sous IE (vraiment je suis étonné) ni sous Opera où le width s'applique véritablement sur la taille du conteneur.
Voir la traduc du W3C pour le width
http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-width
Merci de votre aide.
PS : conteneur est bien une classe (.conteneur) dans le CSS et non un identifiant (#conteneur).
Bonjour,

Le bug n'est pas dans Firefox et Opera, mais dans IE.

Conformément à CSS2, pour que la largeur de globalheader et conteneur soit calculée en fonction de celle de globalcontainer, il faudrait que ce dernier soit lui-même positionné (position:relative par exemple). Faute de cela, c'est le conteneur initial (body) qui sert de référence.

IE Windows, lui, ne respecte pas CSS2 en raison des bugs liés au haslayout (un état des blocs CSS qui n''existe que dans ce navigateur) : il calcule la largeur des blocs en position absolue par rapport au plus proche ancêtre doté de layout. Ici, c'est globalcontainer qui est pris en compte, car la propriété width: 90% lui confère le layout.

Voir http://test.blog-and-blues.org/haslayout/tests/absolute2.html

D'autre part, attention : CSS2.0 n'est pas la référence à retenir. Elle a été actualisée sur de nombreux points par CSS2.1.
Désolé pour l'envoi en double (pas de tentative de forcing) mais une manip un peu hative au clavier qui a soumis le post en double.
Merci à Laurent Denis pour son éclairage : je vois qu'il me reste pas mal de boulot pour maitriser les CSS.