Il n'y avait effectivement aucun rapport avec le bug que je citais, si ce n'est que la même solution (une hauteur fictive) est applicable.
Maintenant, de quel bug s'agit-il ? Ah... Ce fichu calcul des largeurs dans IE !
On sait qu'IE n'implémente pas correctement la propriété width en flux :
- selon CSS2, une largeur en px est impérative : le contenu doit "tenir dedans"
- pour IE, cette largeur est indicative : le bloc concerné va s'étendre en largeur en fonction de son contenu.
FF, Opera, etc. considèrent donc que ton conteneur fait 760px de large, et calculent le 2% de padding latéraux en conséquence : le padding gauche fait bien 15px. Chacun de tes titres s'aligne à gauche en fonction de ce padding et de sa propre marge éventuelle. Tout va bien.
IE, lui, considère que la largeur du conteneur est indéterminée tant que celle du contenu n'a pas été calculée. Il passe donc au calcul de largeur du contenu... c'est à dire aux 2% de padding latéraux... Et se retrouve à devoir calculer
2% de quelque-chose d'indéterminé. Gasp !
Pour ne pas devenir totalement schizophrène, notre brave IE s'en sort avec une amusante pirouette : il
saute une génération. Le 2% sera calculé avec la largeur du grand parent, et non du parent. On peut se demander pourquoi, tout à coup, la largeur du grand parent devient brusquement déterminé, alors que la logique d'IE voudrait qu'elle n'ait pas encore été calculée... Disons que les concepteurs d'IE ont sans doute estimé, à ce stade, que c'était déjà bien assez surréaliste comme cela... Pour tout dire, cela sent un peu le
patch appliqué à la hâte par des développeurs coincés et pressés de bâcler le boulot dans les temps.
Ici, le grand-parent est la boîte générée par l'élément <body>, qui s'étend à tout le conteneur initial. Autrement-dit, la largeur de la zone d'affichage du navigateur. Bilan des courses :
-
le padding-left de ton conteneur dans IE est égal à 2% de la largeur de la zone d'affichage, et non à 2% de 760px
-
Et les 760px sont étendus en conséquence 
Le fait que ton conteneur ne fasse pas 760px affichés dans IE ne se remarque presque pas, car tes pourcentages sont très petits. La différence devient évidente si tu passe à 10% de padding.
Voici une page test qui résume la chose, et ce qui suit, avec des valeurs qui mettent plus en évidence ce qui se passe :
(#nowidth correspond à ton #articlesTitre, et #width à ton #portfolioTitre)
#conteneur {
width : 500px;
}
#contenu {
padding : 0 10%;
background: #007fff;
}
#nowidth {
background : yellow;
}
#width {
background : #7cff00;
width : 300px;
}
#temoin1 {
background: red;
width: 50px;
}
#temoin2 {
background: red;
width: 500px;
}
et le HTML:
<div id="conteneur">
<div id="contenu">
<div id="nowidth">Sans largeur spécifiée</div>
<div id="width">width : 400px;</div>
</div>
<div id="temoin1">50px</div>
<div id="temoin2">500px</div>
</div>
Nous avons donc dans IE un conteneur doté d'une largeur et d'un padding left variables selon la taille de la fenêtre du navigateur : contrairement à ce que tu prévoyais, ce padding ne fera pas 15px, mais un peu plus, environ 20px. Voilà déjà le pourquoi de tes quelques pixels supplémentaires
Mais... Me diras-tu : pourquoi est-ce que tous mes <h2> ne s'alignent-ils pas à gauche sur ce padding de 20px ? Pourquoi juste celui du #portfolioTitre, hein ?
Bonne question
Là, j'avoue que le comportement d'IE devient indéchiffrable
. En effet, quand on regarde de près, on voit:
- qu'IE aligne bel et bien toutes les boîtes de <h2> sur ce padding gauche de 20px. On voit nettement si on utiliser une valeur de 10% à la place du 2% que le
texte de chaque élément commence bien à la même distance du bord gauche du conteneur, plus grande dans IE que dans les autres navigateurs (les boîtes jaune et verte de la page test)
- Mais IE
étend vers la gauche le padding de tes <h2> qui n'ont pas de largeur fixée par la CSS, afin de coller à la valeur de padding du conteneur qui sera la bonne selon CSS2 ! (la boîte jaune de la page test)
- Et n'étend pas vers la gauche le padding du <h2> #portfolioTitre qui a une largeur indiquée dans la CSS (la boîte verte de la page test)...
Du coup, cela donne l'impression que le premier <h2> #articlesTitre est correctement placé, comme dans les autres navigateurs, et pas le second. En fait, aucun des deux <h2> n'est placé comme tu le souhaitais
Bon... Je vais prendre une petite aspirine, moi...
<edit>Pour les curieux, la lecture de
http://www.positioniseverything.net/explorer/percentages.html est une bonne base de départ si on veut explorer l'univers fantasmagorique des dimensions calculées par IE.
En fait, il faut se dire que, contrairement aux apparences, IE6.0 fait systématiquement n'importe quoi avec votre CSS. A tel point qu'IE5.5 fait parfois mieux
Quand je pense au prochain IE7... Je tremble.
Modifié par Laurent Denis (27 Jul 2005 - 09:10)
