div flottant : navigateurs avec bugs d'affichage

**php_de_travers** · 13/05/2007, 09h39

Bonjour,

pour afficher deux div côte à côte, j'en fais flotter un des deux.
Sur Firefox, Opera, SeaMonkey et IE7, tout s'affiche correctement.

Or, il semble que sous des versions d'IE6 et machine avec XP SP1, le flottement des éléments ne soit pas respecté du tout et que le 2° div passe sous le premier : bonjour la mise en page...

Que sait-on de précis sur les bugs d'affichage des navigateurs ?

Par avance, merci de votre aide.

**Dan_A** · 13/05/2007, 10h11

Pour les bugs connus :
http://www.gtalbot.org/BrowserBugsSection/
Pour les problèmes avec float :
http://garyblue.port5.com/webdev/floatdemo.html
http://www.sitepoint.com/forums/show...5&postcount=15

**php_de_travers** · 13/05/2007, 22h16

Eh ben dis donc, ça c'est net et précis.
Merci de ton aide.

PS : l'augmentation des bugs au fil des versions IE6 et IE7 est très amusant.
J'attends avec impatience IE8...

**php_de_travers** · 14/05/2007, 14h21

Pour avoir une nouvelle fois testé l'affichage catastrophique de mes DIVs flottants, je sais à présent que le navigateur est un IE6 SP2.

Tout mon code passe bien en IE7, FF, Opéra, Sea Monkey
Mais en quelques jours, je viens de voir 2 affichages détruits sur IE6 notamment.

Qu'en pensez vous ? S'agit-il de versions logicielles isolées ou au contraire très répandues ?

**Candygirl** · 14/05/2007, 22h01

Envoyé par php_de_travers

Bonjour,

pour afficher deux div côte à côte, j'en fais flotter un des deux.

Que sait-on de précis sur les bugs d'affichage des navigateurs ?

Lorsque tu mets que tu ne fais flotter qu'un des deux je pense immédiatement au bug des 3px qui apparaît justement sur IE6 sous cette configuration. Après tu as aussi le double-margin qui peut être à l'origine du problème observé.

Si tu peux montrer les sites qui posent problème on pourrait peut-être pointer le doigt sur les bugs d'IE6 en cause, mais sans code; c'est difficile...

Pour moi, IE8 aura un nouveau moteur de rendu (et pas platré sur une jambe de bois comme IE7)ou ne sera pas

**php_de_travers** · 16/05/2007, 14h23

Bonjour Candygirl,

je n'arrive pas à reproduire le bug d'affichage qui refuse assez systématiquement de faire flotter des div sous IE6 notamment.
Par contre, j'ai des retours de personnes qui n'ont que cela.
Faut-il faire flotter les 2 div, un à droite un à gauche ?
C'est quoi le bug des 3 pixels ?

Je craque !

Merci de votre aide.

**Candygirl** · 16/05/2007, 14h56

Envoyé par php_de_travers

le bug d'affichage qui refuse assez systématiquement de faire flotter des div sous IE6 notamment.

Tu n'as pas un exemple de ton code à nous montrer, une page en ligne sur laquelle on peut observer le bug dont tu parles?

Envoyé par php_de_travers

Faut-il faire flotter les 2 div, un à droite un à gauche ?

C'est effectivement une solution pour éviter le bug des 3px dont j'ai parlé.

Envoyé par php_de_travers

C'est quoi le bug des 3 pixels ?

IE6 ajoute 3px supplémentaire entre un div en float et le contenu adjacent. par exemple, dans un conteneur de 400px, avec un flottant de 200px et, à côté, un élément de 200px dans le flux, IE6 les affichera l'un en dessous de l'autre car il arrive à un total de 403px et non 400 => pas la place de les mettre côtes à côtes d'après lui.

Un petit exemple:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:padding:0;}
#m1 {width:403px;background-color:red;height:500px;}
#m2 {width:200px;float:left;height:100px; background-color:blue;}
#m3 {width:200px;height:150px; background-color:black;margin-left:200px;}
</style>
</head>
 
<body>
<div id="m1"><div id="m2"></div><div id="m3"></div></div>
</body>
</html>

Si tu élargis le width de #m1 à 403, le bloc noir remonte à côté du bleu avec les 3px bien visibles entre deux.

Après ton problème peut venir de plusieurs raisons différentes, difiicile de dire sans voir le code-source.

**php_de_travers** · 16/05/2007, 15h34

200 + 200 = 403

Merci à toi Candygirl : cette démonstration est éloquente.
Mon testeur vient de me confirmer que 2 div de 200 px ne peuvent pas se poser l'un à côté de l'autre dans un div conteneur de 400 px, sous IE.

On peut donc être un cancre en calcul mental et devenir un des hommes les plus riches de la planète.
Merci Bill Gates : à ton prochain passage, c'est le goudron et les plumes !

Comment concilier les navigateurs et les bouses logicielles si on cherche quand même à afficher côte à côte ?

**Candygirl** · 16/05/2007, 15h59

Envoyé par php_de_travers

Comment concilier les navigateurs et les bouses logicielles si on cherche quand même à afficher côte à côte ?

Tu as donné toi-même la solution plus haut: positionner les 2 éléments en float. Donc, dans mon exemple, tu remplaces le margin-left de 200 par un float right (ou float:left) et IE6 l'affiche correctement.

La seule exception est si l'élément flottant a une dimension fixe et que l'autre doit occuper le restant de l'espace à disposition puisqu'on ne peut alors pas lui attribuer de width.

div flottant : navigateurs avec bugs d'affichage

CSS

Discussions similaires

Partager

Partager