Le fameux bug des 3 pixels sous IE6

**RootsRagga** · 27/03/2009, 13h18

Bonjour,

J'ai pu lire (je ne sais plus où) que lorsque un float est adjacent à un bloc, alors un décalage de 3 pixels se produit sur IE6

Sur le site que je suis en train de faire, c'est vraiment un problème, car l'en-tête se trouve séparé du corps et laisse apparaître le fond.
http://www.atlantic-plomberie.fr

Je pense qu'il faut utiliser un commentaire conditionnel pour créer un affichage spécifique à IE6.
Mais que mettre dedans?

Si vous avez une solution, je suis preneur,

A bientôt,
Bruno

**Macmillenium** · 27/03/2009, 13h30

Bonjour,

Non, ce n'est pas un problème de float.
La réponse dans ce topic.

**RootsRagga** · 27/03/2009, 19h51

Merci pour ta réponse,

Je n'ai pas l'impression d'avoir un problème de taille d'élément image, mais un petit décalage vers le bas d'un élément div, seulement sur IE6.

Je vais tout de même modifier le doctype

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

et je verrai lundi le résultat (il y a un PC au boulot qui utilise IE6)

A lundi,

**Macmillenium** · 27/03/2009, 20h49

Ne change pas le doctype, ton code respecte bien ses règles d'écriture (malgré des petits détails sémantique)

Envoyé par RootsRagga

Je n'ai pas l'impression d'avoir un problème de taille d'élément image, mais un petit décalage vers le bas d'un élément div, seulement sur IE6.

Pourtant c'est bien expliqué :

Envoyé par Macmillenium

Une image est un élément de type inline aligné par défaut en vertical-align:baseline et se comporte comme du texte en laissant une marge en dessous pour certains caractères comme p ou q.

Cette marge sous IE6 est au niveau de la bannière atlantic_plomberie.png. Pour résoudre ce problème :

Envoyé par Macmillenium

Tu peux corriger ce problème en ajoutant un display:block sur l'image ou en changeant son alignement avec un vertical-align:middle;

En gros :

Code CSS :

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

1
2
 
#en-tete img { display:block }

**GihefBey** · 27/03/2009, 20h53

Bonjour,

Rien a voir avec sa taille, mais avec son affichage.

Essaye

Code CSS :

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

1
2
3
#en-tete img {
  display : block;
  }

<edit>
Le temps de rédiger...
Enfin, ça fait 3 réponses qui indiquent la même chose.
Ça doit certainement être la solution (-;
</edit>

-

**RootsRagga** · 27/03/2009, 23h14

Merci pour votre aide,

J'étais vraiment persuadé qu'il existait un problème connu lié au float.
J'ai pu tester le code CSS avec IE Tester...

encore merci,
Bon week-end!

**Macmillenium** · 27/03/2009, 23h21

Envoyé par RootsRagga

J'ai hâte de voir que ça fonctionne...
Je vous dirais ça lundi soir!

Si tu es sous Windows, tu peux installer IE6 en standalone (autonome) :
Multiple IEs
Ou
IEtester

Je te conseille plutôt IEtester, le rendu est le même que IE6 en natif (personnellement je n'avais jamais remarqué de différence)