D'abord, des excuses: le message auquel je réponds, je ne le retrouve plus... J'ai pourtant beaucoup cherché. Il a très certainement été résolu, de surcroît! mais c'est l'occasion de souligner un effet amusant dû à un calcul d'arrondi avec IE6 (si ça se trouve, j'enfonce une porte ouverte, ou je répète la solution qui aura été donnée ?).
Voici (en bas), copié-collé tel que je l'ai trouvé sur ce forum il y a un jour ou deux (sauf erreur), un "gabarit" coloré, inspiré de ceux de Alsacreations... Sauf que celui-ci pose problème à son auteur sous IE6. Rien à signaler sous FF. Deux colonnes flottantes capricieuses: Le flottant de droite s'en va classiquement se promener sous celui de gauche au lieu rester sagement en rang, avec pourtant une "clear-botte" adéquate à son pied.
En résumé, il y a un conteneur de largeur 100% "rempli" par deux blocs flottants de largeur 50% chacun (et flottant tous 2 à gauche).
A tester sous IE6: Si on diminue très lentement la largeur du navigateur, la colonne de droite effectue une succession d'aller-retours entre sa "bonne" position à droite, et une position capricieuse en-dessous.
L'explication de ce phénomène semble fichtrement bien venir de la façon dont est calculée la demi-largeur de 50%. Tout se passe comme si le demi-pixel sous IE6-quirk était arrondi à la valeur entière supérieure. (voir toutefois la remarque 4 plus bas)
Lorsque la largeur totale est un nombre pair d'unités de mesure, les deux colonnes sont bien côte-à-côte. Mais dès que la largeur totale est un nombre impair, le bloc de gauche prend un tout petit peu plus de 50% de place en largeur, et le bloc de droite n'arrive plus à caser ses épaules de 50% dans les 49,999... % qui restent.
Ce phénomène de flottant ne se produit plus si l'on modifie la largeur du bloc de droite ainsi:
Remarque1: Il y a fort logiquement un certain nombre de 9 (dans 49.999...) au bout duquel cela se remet à à clignoter. Ce nombre n'est peut-être pas le même pour tout le monde... Mais même avec 49.999%, on ne voit pas vraiment la différence à l'oeil nu
Remarque2: En revanche, c'est sous FF que le comportement du bloc de droite devient curieux en fonction de la "syntaxe" du format : essayez successivement 49% (normal, les deux blocs flottent à gauche), mais notez la différence entre 49.% et 49.0% !! entre autres... FF n'aime pas les décimaux dans les pourcentages? ou bien n'aurais-je pas respecté une syntaxe standardisée ?
Remarque3: Les 90% de hauteur que l'auteur à souhaité attribuer à ces colonnes arrivent toujours à trouver leur place...
Remarque4: Ce comportement "flottant-clignotant" se produit sous IE6 en mode quirk. En effet, il ne se produit plus si l'on rajoute en 1ere ligne une DTD 4.01 Transitional. Se peut-il que ce probleme de calcul d'arrondi, avec dépassement de 2x50% "alternatif" soit lié à ce modele de boite et ses dimensions extérieures ? une propagation d'erreur d'arrondi dans le calcul des marges peut-être ?
Voici le gabarit capricieux original (j'ai enlevé les lignes vides). Puisse son auteur me pardonner de n'avoir pas su le retrouver dans les pages de ce forum.
Modifié par gonga (28 Oct 2006 - 10:58)
Voici (en bas), copié-collé tel que je l'ai trouvé sur ce forum il y a un jour ou deux (sauf erreur), un "gabarit" coloré, inspiré de ceux de Alsacreations... Sauf que celui-ci pose problème à son auteur sous IE6. Rien à signaler sous FF. Deux colonnes flottantes capricieuses: Le flottant de droite s'en va classiquement se promener sous celui de gauche au lieu rester sagement en rang, avec pourtant une "clear-botte" adéquate à son pied.
En résumé, il y a un conteneur de largeur 100% "rempli" par deux blocs flottants de largeur 50% chacun (et flottant tous 2 à gauche).
A tester sous IE6: Si on diminue très lentement la largeur du navigateur, la colonne de droite effectue une succession d'aller-retours entre sa "bonne" position à droite, et une position capricieuse en-dessous.
L'explication de ce phénomène semble fichtrement bien venir de la façon dont est calculée la demi-largeur de 50%. Tout se passe comme si le demi-pixel sous IE6-quirk était arrondi à la valeur entière supérieure. (voir toutefois la remarque 4 plus bas)
Lorsque la largeur totale est un nombre pair d'unités de mesure, les deux colonnes sont bien côte-à-côte. Mais dès que la largeur totale est un nombre impair, le bloc de gauche prend un tout petit peu plus de 50% de place en largeur, et le bloc de droite n'arrive plus à caser ses épaules de 50% dans les 49,999... % qui restent.
Ce phénomène de flottant ne se produit plus si l'on modifie la largeur du bloc de droite ainsi:
#d{
float:left;
width:49.99999999%;
.../...
Remarque1: Il y a fort logiquement un certain nombre de 9 (dans 49.999...) au bout duquel cela se remet à à clignoter. Ce nombre n'est peut-être pas le même pour tout le monde... Mais même avec 49.999%, on ne voit pas vraiment la différence à l'oeil nu
Remarque2: En revanche, c'est sous FF que le comportement du bloc de droite devient curieux en fonction de la "syntaxe" du format : essayez successivement 49% (normal, les deux blocs flottent à gauche), mais notez la différence entre 49.% et 49.0% !! entre autres... FF n'aime pas les décimaux dans les pourcentages? ou bien n'aurais-je pas respecté une syntaxe standardisée ?
Remarque3: Les 90% de hauteur que l'auteur à souhaité attribuer à ces colonnes arrivent toujours à trouver leur place...
Remarque4: Ce comportement "flottant-clignotant" se produit sous IE6 en mode quirk. En effet, il ne se produit plus si l'on rajoute en 1ere ligne une DTD 4.01 Transitional. Se peut-il que ce probleme de calcul d'arrondi, avec dépassement de 2x50% "alternatif" soit lié à ce modele de boite et ses dimensions extérieures ? une propagation d'erreur d'arrondi dans le calcul des marges peut-être ?
Voici le gabarit capricieux original (j'ai enlevé les lignes vides). Puisse son auteur me pardonner de n'avoir pas su le retrouver dans les pages de ce forum.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
p {
margin:0;
padding:0;
}
#g{
float:left;
width:50%;
height:90%;
background-color:#FFCC66;
}
#d{
float:left;
width:50%;
height:90%;
background-color:#3366FF;
}
#header {
background-color:#FFFF00;
height:5%;
width:100%;
}
#footer
{
clear:both;
width:100%;
background-color:#663333;
min-height:5%;
}
</style>
</head>
<body>
<div id="header">
la barre d'outils
</div>
<div id="g">
<p>bloc gauche</p>
<p> </p>
<p> </p>
</div>
<div id="d">
<p>bloc droit</p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p>bloc droit</p>
<p> </p>
<p> </p>
</div>
</body>
</html>
Modifié par gonga (28 Oct 2006 - 10:58)
. Il semble toutefois que cet exemple simple que tu as fourni conduise à soupçonner très fortement, pour le moins, que le demi-pixel 0.5000px soit arrondi à 1px sous IE6. Donc on ne doit pas mettre 2 fois 50% dans 100% de largeur.