[résolu]Alignement images sous IE6

Bonjour,

je viens de terminer un site ( une page) qui est actuellement en beta.

L'affichage de mes images se comportent normalement mais le seul hic est IE6, ou les images font un retour à la ligne.
J'ai essayé de mettre un border =0 mais rien n'y fait.

Voici le lien pour mieux s'en rendre compte.

www.apostolat.ch/test

Merci d'éclairer ma pauvre lanterne !


Bonne journée

Dup's
Modifié par dups (17 May 2007 - 09:46)

dups a écrit :
Bonjour,

je viens de terminer un site ( une page) qui est actuellement en beta.

L'affichage de mes images se comportent normalement mais le seul hic est IE6, ou les images font un retour à la ligne.
J'ai essayé de mettre un border =0 mais rien n'y fait.

Les 3 dernières images sautent (retour à la ligne), pourtant ce sont les même blocs que le texte.

Voici le lien pour mieux s'en rendre compte.

www.apostolat.ch/test

Merci d'éclairer ma pauvre lanterne !


Bonne journée

Dup's

Modifié par dups (16 May 2007 - 18:40)

regarder mais pas trouver

t'as essayé avec des img avec un width plus petit?

pour voir si c'est pas quelques pixels d'un margin ou padding qui fait deborder l'image?

Bonjour,

Surement le bug du 3px jog qui rajoute 3px de marge aux éléments flottants juxtaposés sous ie6. Un solution serait de laisser tes images inline, elles s'aligneraient toutes seules et plus de bug...

inline =, alors tu écris ça comment pour transformer mes blocs image?

Merci du coup de pouce

Re,

Je n'ai pas regardé ton code mais par définition elles le sont par contre si tu les as inséré dans des balises de type bloc (<p>, <div> ...) tu peux donner à ces balises la propriété display: inline;

Bonsoir,
J'ai essayé de mettre le display à mes trois blocs, sans résultat significatif.


Merci d'avance

Salut,

Heu, pour le display: inline, il faut supprimer le float: left;
De tout manière comme tes class col, colm et colend sont déjà utilisées pour ton texte, ça ne va pas le faire! Le plus simple c'est de supprimer les div qui les encapsulent et de jouer sur les margins pour retrouver la mise en page de tes colonnes.

.bloc3 {
	clear: both;
	width: 930px;
	padding: 0px;
	margin:10px 0 0 0;
}

.bloc3 img{
	width: 290px;
	height:176px;
	margin:10px 30px 0 0;
	padding: 0;

}

.bloc3 img.dernier_image{
	margin:10px 0 0 0;
}

        <div class="bloc3">
          <!-- fin bloc -->
            <img src="alex.jpg" alt="poire design Lausanne" title ="poire suisse" /><img  src="alex.jpg"alt="poire design Lausanne" title ="poire suisse" /><img src="alex.jpg" alt="poire design Lausanne" class="dernier_image" title ="poire suisse" />
          <!--col-->

        </div>

Ps: j'ai supprimé le float: left de bloc3 et celui de contenu aussi tu peux t'en passer.
Laisse le code de tes images sur une même ligne sinon tu risques d'avoir le rajout de quelques pixels en marge de chaque image (Et oui)
Bon tout ça devrait te supprimer le bug, c'est une des solutions.

Bon courage

Merci pour tout, le problème est résolu.
Je voulais économiser sur le code, la manière de Ghost est excellent.

Merci pour tout

Dup's