Discussion :

[mtroya]

Le symptôme : colonne de droite 'descend'
Lorsqu'on positionne 2 colonnes l'une à côté de l'autre, souvent avec float:left pour celle de gauche (éventuellement float:right pour celle de droite) on a la désagréable surprise en ie (et parfois sur Opera) que la colonne de droite descende en-dessous de la colonne de gauche au lieu de rester à côté.
Cela semble aléatoire (la moitié du temps si on redimensionne) et ne se produit qu'avec des largeurs en pourcentages.

La raison probable : erreur dans la façon d'arrondir
Il est très probable que le développeur de navigateur a mal arrondi lorsqu'il transforme les % en pixels, et a pris l'arrondi au lieu de la valeur entière.
Ainsi, si le calcul donne 49.7, il prend 50 au lieu de 49 et alors il manquera 1px ce qui provoque le passage de tout le bloc à la ligne suivante...

Comment y remédier
Très simple une fois qu'on a compris : enlever 0.01% à votre largeur.
Au lieu de 50%, 49.99%, au lieu de 30%, 29.99% etc...
On résout le problème en ne changeant quasiment pas l'apparence souhaitée.

programmable en php
En php, cela donne :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)
{
     $largeur='49.99%';
}
else
{
     $largeur='50%';
}

et dans la feuille de style, inclure ...width:$largeur...

[Macmillenium]

Bonjour,

Alors là ... je ne comprend pas du tout pourquoi le php !!
Des fois c'est un problème d'espace a corriger avec les marges négatives ( margin-right:-200px; ) ou une petite différence de largeur sous IE6 a corriger en passant par une feuille de style alternative ...

et dans la feuille de style, inclure ...width:$largeur...

Ah oui exécuter du php dans un fichier css ??
A moins que tu parse la css mais c'est vraiment inutile.

[Bisûnûrs]

Candygirl avait posté plusieurs réponses assez similaires à ce sujet :

La logique est assez simple, si on prend l'exemple basique de 2 colonnes de 50%/50%. Lorsque le conteneur a pour largeur un nombre impaire de pixels (201 par exemple), le 50% représente xx.5 px (100.5 pour notre exemple).

Le problème est que IE va faire systématiquement un arrondi mathématique au nombre de pixel supérieur ce qui va donner 1px de trop rapport au conteneur (101+101=202).

Pour du 50/50 on aura soit le nombre exacte soit un px de plus
Pour du 33.33 on aura soit un px de moins soit un de plus soit le bon nombre
etc...

Pour éviter les problème sur IE le mieux est de laisser une dimensions libre afin d'absorber les différences. C'est possible en évitant de donner une dimension au dernier des éléments et en supprimant son flottement.

L'idéal serait de jouer sur les pseudo-classe :first-child et :last-child pour éviter d'attribuer des classes mais malheureusement seul :first-child est reconnu sur IE7.

Je pense que j'opterais pour ce genre de compromis:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
	<li style="background:#888;">menu1</li>
	<li style="background:#999;">menu2</li>
	<li style="background:#aaa;">menu3</li>
	<li style="background:#bbb;">menu4</li>
	<li style="background:#ccc;">menu5</li>
	<li id="last" style="background:#ddd;">menu6</li>	
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
* {margin:0;padding:0;}
ul {list-style:none;}
li {width:17%;float:left;}
li:first-child {width:16%;}
#last {float:none;width:auto;}

Ce qui nous donne le premier et dernier élément avec une largeur de 16%, les 4 autres à 17% et avec le dernier qui peut absorber les différences de pixels dues aux arrondis.

Le problème avec opera c'est qu'il n'interprète que les valeurs rondes de pourcentage. 50% ou 50.9% c'est du kiff pour lui, il interprète comme 50%.

@Macmillenium : C'est toujours possible avec des feuilles de style dynamiques : http://css4design.developpez.com/tut...ique-avec-php/

[GihefBey]

Bonjour,

Je viens de tomber sur une autre approche chez alistapart : Faux Absolute Positioning [en].

Je ne l'ai pas encore testée, mais c'est intéressant.

-

[devyan]

Candygirl avait posté plusieurs réponses assez similaires à ce sujet :

@Macmillenium : C'est toujours possible avec des feuilles de style dynamiques : http://css4design.developpez.com/tut...ique-avec-php/

+1 J'ai personnellement rencontré le problème et constaté que cela se produit uniquement lorsque le calcul des largeurs de colonnes ne donnent pas un compte rond (IE semble réaliser un arrondi 122.5 => 123 et donc le total dépassant la largeur de la page la dernière colonne passe à la ligne )