bonsoir ,
en effets ,
... robustesse d'une technique ou technique "générique" qui passe partout ne sont pas forcement synonymes... les tableau ont un coté "robustes" pour la mise en page
, les commentaires conditionnels sont intéressant , mais aussi difficile a maintenir au cours du temps , alors , au cas par cas une soluce qui passe là ou il faut est peut-être plus simple a maintenir (aussi , un commentaire dans le css pour mettre en garde sur le comportement ou CC pour IE attirera l'attention )
La proposition faite pour ce cas montre que il y a toujours plusieurs façon de faire. ... mais laquelle choisir ? En fait une fois que l'on comprend mieux le comportement "différent" de IE , le choix devient plus aisé.
Pour reprendre l'exemple que j'ai donné plus haut , on pouvait aussi garder les coordonnées horizontales et n'appliquer la marge que sur le positionnement vertical.
Pour reprendre l'idée du text-align:center ; qui peut faire bugger.
<!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>
<title>pour test visuels IE/ff (windows)</title>
<style type='text/css'>
p { margin:0; background-color:#FFFF00; margin:2px;
}
span { display:block;position:absolute; left:20px; margin-top:10px; background-color:#FF0000; }
div {position:relative;text-align:center;height:1%}
.relatif {position:relative;}
</style>
</head>
<body>
<div>
<p >Item1
du texte dans le flux et un br ici:<br /> <span>du texte, <br />du texte, du texte</span>
< br /> : <br />du texte dans le flux sans br <span>du texte, <br />du texte, du texte</span>
</p>
<p class="relatif">Item2 positionner en relatif relatif .
</p>
<p>Item1
du texte dans le flux et un span en absolu et display:block; hérésie ? sans < br /> devant:
<span class="block">du texte, <br />du texte, du texte</span>
</p>
</div>
</body>
</html>
En fait ce second exemple est un peu plus tordue ou met en évidence d'autres comportements et d'autre possibilités (text-align pour IE "debuggé").
1) IE et le layout
Sans layout sur un des parents ou prédécesseurs , IE positionne l'élément en absolue en fonction de la regle text-align applicable (defaut = left si rien de specifié aux parents).height:1% appliqué au div conteneur ou au premier paragraphe va renvoyé les span a gauche comme prévu, effet du layout qui rend IE en mesure de positionné les éléments correctement à l'ecran.
2) le position relative ... tient le second paragraphe déborde aussi dans FF ??
3) appliquons un display block au travers du css. tiens , ff décale les élément en absolue , mais ne passe pas dans IE .. (a éviter donc de laisser trainé).
sinon en reprenant ton premier exemple , en modifiant quelque peu le css avec un position relatif au parent commun (le div) , un left et un margin top au span , plus aussi une touche de layout pour IE (encore au div ) le css pourrait aussi devenir ça et te donner un résultat acceptable :
p { margin:0; background-color:#FFFF00; margin:2px; }
span { position:absolute; left:20px; margin-top:10px; background-color:#FF0000; z-index:20; }
div { position:relative; height:1%;text-align:center;}
(pour l'exemple donné de ton premier post).
En fait plein de choix et d'approches différentes ,et basé/testé sur 2/3 navigateurs seulement
, l'important est surtout d'aller au plus simple et de bien observé les comportements d'IE pour en tirer parties ou les evités. (opinion d'amateur qui n'engage que moi) .
... C'etait le position relatif au mauvais endroit qui faisait buggé ton gabarit dans IE .
a plus
