Bonjour guenael, et bienvenue sur ces forums.
Il s'agit d'un bug de Haslayout.
Cf.
http://www.test.blog-and-blues.org/haslayout/
Et l'explication générale :
http://www.test.blog-and-blues.org/haslayout/trad_temp.html
Bon, c'est un peu abrupt. Alors on va essayer d'expliquer brièvement.
Le HasLayout, c'est une propriété interne au moteur de rendu d'Internet Explorer windows. Chaque élément de type bloc (paragraphes, titres, divisions, etc.) soit a le
layout, soit ne l'a pas (c'est du zéro ou un, quoi).
Le fait d'avoir le layout ou pas peut hélas modifier fortement le comportement ou le rendu du bloc. C'est (en partie) la source d'un certain nombre des bugs de rendu d'Internet Explorer. À l'opposé, on peut parfois donner le
layout a un élément pour corriger un bug, ça marche un peu dans les deux sens...
Il y a plusieurs propriétés CSS qui confèrent le
layout à un élément. En particulier, tous les éléments de type bloc qui ont une dimmension fixée (
width ou
height, en pixels ou en pourcentages) ont le
layout.
Si on reprend l'exemple que tu donnes, en corrigeant un peu le code HTML pour avoir quelque chose de valide (regarde les différences pour voir ce que tu as oublié) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
#page {
position:relative; top:4px;
background:red;
}
.principal {
background-color:blue;
padding: 20px;
}
.article {
background-color:green;
padding: 20px;
}
</style>
</head>
<body>
<div id="page">
<p>début</p>
<div class="principal">
<p>premier article, mais pourquoi avec IE le fond reste-t-il bleu(class principal) et n'est-il pas vert (class article) ?<br />Il devient vert quand on change les dimensions de la fenêtre.</p>
<div class="article">
<p>Les sanglots longs des sanglots de l'automne blessent mon coeur d'une langueur monotone. Les sanglots longs des sanglots de l'automne blessent mon coeur d'une langueur monotone. Les sanglots longs des sanglots de l'automne blessent mon coeur d'une langueur monotone. Les sanglots longs des sanglots de l'automne blessent mon coeur d'une langueur monotone. Les sanglots longs des sanglots de l'automne blessent mon coeur d'une langueur monotone.</p>
</div>
</div>
</div>
</body>
</html>
Note : les deux éléments oubliés qui étaient indispensables sont la déclaration de type de document (Doctype), et l'attribut type="text/css" pour la balise <style>.
Ces petites corrections ne corrigent pas notre problème pour autant (même si elles nous évitent d'en avoir d'autres par la suite).
Tu as trois divisions (div) qui contiennent chacune un paragraphe, soit en tout six éléments de type bloc. Le seul qui soit doté de
layout est la première division, qui porte l'identifiant "page".
#page {
position: relative;
width: 780px;
}
C'est la largeur fixe qui confère le
layout à cet élément.
Le HasLayout tout seul ne poserait pas (dans la situation présente) de problème. Le bug se produit à cause du positionnement relatif. En effet, HasLayout et positionnement relatif ne font pas toujours bon ménage.
La page que je donne en premier lien recense un certain nombre de bugs de HasLayout, dont quelques uns avec le positionnement relatif, mais je n'ai pas trouvé trace de celui-ci (pourtant assez simple...). Qu'à cela ne tienne, on peut toujours essayer de combattre le feu par le feu ! Si on applique un
width: 100%; div.principal ou à div.article, le bug semble être corrigé.
On a donc plusieurs solutions :
- se passer du positionnement relatif dans ce cas précis, s'il n'est pas nécessaire ;
- ne pas donner de dimmension fixe au bloc parent (div#page), si possible ;
- conférer le
layout au bloc enfant (div.principal), voire au petit-enfant (div.article).
L'article traduit par Laurent Denis (deuxième lien) précise d'autre propriétés qui confèrent le
layout, si un
width: 100%; pose problème.
Voilà, j'espère que ça t'aidera.
Une remarque en passant : avec une largeur de 780px, tu as deux chances sur trois que cela crée une barre de défilement horizontale chez l'utilisateur d'un écran en 800x600. La largeur canonique serait plutôt 760px, plus ou moins 10px (dont à moins de faire plus étroit, on choisira dans la plage 750-770px).
Ne pas oublier qu'en plus de la barre de défilement (dont la largeur peut varier selon les réglages de l'utilisateur), on peut avoir des bordures de fenêtre, voire une fenêtre qui ne prend pas toute la largeur de l'écran.
