Discussion :

[cootchy]

Bonjour à tous,

J'ai un problème de compatibilité avec IE 5.5. Oui , le site que je fais soit supporter cette version de navigateur, souhait du client...

Ce que je souhaite faire c'est aligner 3 images cote à cote. Pour cela j'ai un div qui contient mes 3 images. Mes 3 images sont ensuite déclarées en float:left par le css.

je vous laisse la structure html de ma page de test et un screenshot du rendu en pièce jointe.

Le problème, c'est que les images ne sont jamais collées. Il y a toujours un petit peu d'espaces entre elles. Et je n'arrive pas à les supprimer.

Quelqu'un aurait-il une solution magique pour effectuer cela ?

Merci d'avance.

[MasterOfChakhaL]

Salut,

Lorsque dans ton code source tu écris cela,

Code :

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

1
2
3
a
b
c

Normalement, tu t'attends a voir s'afficher:
a b c et non abc
les images, comme le texte sont des éléments en ligne. Elles e comportent de la même manière.
Alors deux possibilités
1- tu écris tes 3 balises à la suitre sans retour à la ligne.
2- tu places le saut de ligne en commentaire:

Code :

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

1
2
3
<img src="" alt="" /><!--
--><img src="" alt="" /><!--
--><img src="" alt="" />

Normalement, tu devrais pouvoir te passer de tous les styles définis sur tes images (pas besoin de float)

[cootchy]

Merci du conseil mais ca ne change strictement rien... (J'avais déjà essayé quand même...)

Pour info j'ai le meme comportement sans le float.

Encore pour info, cette page html est parfaite sur IE 6, IE 7, FF et Opera.

Je soupconne donc très fortement un BUG d'IE 5.5.
Y aurait-il alors un hack afin de contourner ce bug ?

Merci d'avance.

[MasterOfChakhaL]

peut-être que ie 5.5 place des margin et/ou padding par défaut sur les images.

essaye cela:

Code :

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

img { padding: 0; margin 0; }

Avec en plus une des bidouilles dont je t'ai parlé avant

[cootchy]

déjà essayé aussi... mais ca ne change rien aussi...

J'ai essayé de mettre :

"font-size:0px" ==> marche pas
"letter-spacing:-10px" ==> marche pas
"text-indent:-10px" ==> marche pas

Voili voilou

[Auteur]

bonjour,

place hspace dans la balise img.

Code html :

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

1
2
3
4
5
6
 
<div class="clearfix">
<img src="GROUPE_1.jpg" hspace="0" alt="" width="340" height="100"/>
<img src="GROUPE_2.jpg" hspace="0"  alt="" width="70" height="60"/>
<img src="GROUPE_3.jpg" hspace="0"  alt="" width="190" height="60"/>
</div>

par contre le code ne passe pas la validation XHTML

[MasterOfChakhaL]

re,

regarde cette page et dis mois ce que tu vois.
Il y a trois séries de trois images.
http://chakhal.free.fr/dvp/test-image.html

La première série doit présenter les espacements, pas les deux autres (j'ai testé avec une émulation de IE5 et IE.5 et les deux me donnent le même résultat.

Regarde la source et tu constateras qu'il n'y a pas besoin de css pour ce que tu veux faire.
(j'avoue que le fond du body est défini par le css)

[Auteur]

cootchy utilise le code de MasterOfChakhaL et oublie le hspace

[Candygirl]

Il me semble que le problème n'est pas spécifique à IE5.5, mais est tout simplement dû au mode quirks d'IE (sauf erreur IE5.5 ne connait pas le mode standard quand bien même un doctype est spécifié). Si tu regardes avec IE7 tu as exactement le même résultat sans docytpe spécifié.

Il est intéressant de constater que l'espace fait 3px de chaque côté de l'image (comme le fameux bug des 3px sur IE6 en mode standard ).

Tu peux effectivement laisser tes images dans le flux, c'est d'ailleurs bien plus simple pour que ton conteneur vienne jusqu'au bas (plus besoin du clear ni du hack 1%).

Comme MasterOfkChakals l'a indiqué, tu n'as qu'à coller tes images dans le html et je rajouterais juste un vertical-align:top sur la balise image:

Code css :

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

.clearfix img {vertical-align:top;}