J'ai trouvé ce matin un comportement d'IE que j'ignorais. Bug et/ou effet bon à savoir ? À tout hasard, je vous laisse voir si vous avez 2'.
Dans le code ci-dessous, si j'oublie le hack IE "* html id { height : 1px;}, alors j'ai le petit bug d'affichage connu. Et c pas fini : IE place alors tous les blocs "float : left/right" qui suivent SOUS le bloc parent... sauf si le float est placé dans un nouveau conteneur (id="centrage" ici).
Selon moi ça contredit directement la "règle" css "Positioned elements paint on top of everything else if they don't have negative z-index".
Le très utile article de Laurent Denis Float, clear et contextes de formatage ne parle pas de cet effet secondaire.
Le code en ligne. j'ai volontairement décalé les blocs "float: right" de 20pt à droite et les ai colorés dans un mauve absolument délicieux
qqn avec IE7 peut-il dire si il suit son talentueux aïeul, ou au contraire Firefox / Opera & Co ? Merci
La structure du xHTML :
Et le CSS
Modifié par kozaki (25 May 2007 - 16:49)
Dans le code ci-dessous, si j'oublie le hack IE "* html id { height : 1px;}, alors j'ai le petit bug d'affichage connu. Et c pas fini : IE place alors tous les blocs "float : left/right" qui suivent SOUS le bloc parent... sauf si le float est placé dans un nouveau conteneur (id="centrage" ici).
Selon moi ça contredit directement la "règle" css "Positioned elements paint on top of everything else if they don't have negative z-index".
Le très utile article de Laurent Denis Float, clear et contextes de formatage ne parle pas de cet effet secondaire.
Le code en ligne. j'ai volontairement décalé les blocs "float: right" de 20pt à droite et les ai colorés dans un mauve absolument délicieux
qqn avec IE7 peut-il dire si il suit son talentueux aïeul, ou au contraire Firefox / Opera & Co ? Merci
La structure du xHTML :
<div id="mainbox">
<div id="mainboxcontent">
<div id="wrapper_mainbox">
<h3><img class="floatright" />Titre</h3>
<div class="centrage">
<p class="floatright">Et le CSS
/* <group=main> */
#mainboxcontent {
display : block;
background : #f8f8f8; /* placé au-dessus des floats suivants par IE6 */
color : #000;
border : 0 solid #6f3800;
border-width : 0 1px;
height : auto;
text-align : center; /* corrige le bug de centrage IE */ }
#mainboxcontent * {
text-align : left; /* retablit l'alignement - centrage bug IE */ }
/* Commenté pour affichage du bug d'IE6, qui affiche alors blocs floatright SOUS le background...
* html #mainboxcontent {
height : 1px;}
*/
#wrapper_mainbox {
margin : 0 1em; }Modifié par kozaki (25 May 2007 - 16:49)
