Problème de marge dans le contenu d'une table sur IE8

Bonjour,

cela fait un bout de temps maintenant que je cherche à résoudre mon problème sans trouver de solution ni même un indice. Alors je me jette à l'eau

Mon problème :
je souhaite faire une galerie d'images, chaque image est contenue dans un tableau (seul solution pour qu'elles soient alignées horizontalement et verticalement dans un carré au fond noir).

Cette solution marche à merveille sur FF, Chrome et Safari. Ca ne marche pas du tout sur IE6 mais j'ai abandonné en faisant un autre affichage, d'où la div .Mon ImageDiv.
Par contre, je ne veux pas abandonner IE8, mais il me fait un décalage bizarre dans le tableau, comme si l'image avait une marge de 2px.
Je ne sais pas d'où ce bug vient.

Voici le code :

.MonImage { float:left; height:50px; overflow:hidden; text-align:center; width:50px; background:black; }
.MonImage tbody { float:left; height:50px; overflow:hidden; text-align:center; width:50px; }
.MonImage tr { float:left; height:50px; overflow:hidden; text-align:center; width:50px; }
.MonImage td { width:50px; height:50px; text-align:center; padding:0;}
.MonImageDiv { width:50px; height:50px; text-align:center; display:inline; overflow:hidden; font-size:0;}
.MonImageDiv a { font-size:0;  }
.MonImageDiv a img { width:50px; border:0 none; }

 <table cellspacing="0" cellpadding="0" border="0" class="MonImage"><tbody><tr><td valign="middle">
        <div class="MonImageDiv">
        	<a href="#"><img title="pedro" src="http://www.citizenside.com/fr/reporter-photo-video/pedro-100.jpg" alt="pedro"></a> 
        </div>
    </td></tr></tbody></table>

Merci par avance de l'aide que vous pouvez m'apporter ^^
Modifié par Altai (04 Aug 2010 - 17:36)

Salut,

Rien que ça c'est louche, et je suis pas allé plus loin :

.MonImage { float:left; } 
.MonImage tbody { float:left; } 
.MonImage tr { float:left; }

Je n'arrive pas à imaginer à un cas de figure qui nécessite de floater le tableau, son body, et sa/ses tr. Et du coup ça ne me suprend pas vraiment que les navigateurs adoptent un comportement différent face à cette "question". En tout cas, en ne floatant que le tableau, ça supprime ta marge de 2px sous IE8, c'est déjà ça.

Bonjour Marcv et merci pour ton intervention.

Je me sers des float:left car je n'utilise pas toujours des images qui font exactement la même taille que le tableau. Je n'ai pas le contrôle sur les images qui arrivent dans ce tableau et donc encore moins sur leur taille.

C'est pourquoi j'utilise overflow:hidden, or il n'est compris que lorsque table, tbody et tr sont en float:left; et sur n'importe quel navigateur.

Parfois j'utilise le width sur l'image (comme mon exemple), mais quand l'image est un portrait, elle est plus longue que le tableau et donc elle dépasse sur IE.

Donc ma solution marche bien chez tout le monde sauf IE8 qui fait cette fameuse marge.

Que faire alors ?

Merci

À regarder l'URL mentionnée, je conclus que l'utilisation d'un tableau n'est pas appropriée pour ce que tu veux faire. À ta place, je reverrais la structure HTML.

a écrit :
À regarder l'URL mentionnée, je conclus que l'utilisation d'un tableau n'est pas appropriée pour ce que tu veux faire. À ta place, je reverrais la structure HTML.

Je ne comprends pas ta remarque sur mon url, ni ce que je dois revoir, je ne connais pas d'autre solution pour aligner verticalement une image rectangle avec un width indéfini dans un carré.
Merci

Altai a écrit :
je ne connais pas d'autre solution pour aligner verticalement une image rectangle avec un width indéfini dans un carré.

Une petite recherche sur le site t'aurait vraisemblablement conduit à cette astuce qui t'aurait fait découvrir la propriété CSS vertical-align, comme quoi il n'est plus nécessaire de recourir systématiquement à un tableau de mise en forme.
Modifié par Victor BRITO (16 Jul 2010 - 15:31)

Merci pour ton aide.

Mais ça ne marche toujours pas. Je connaissais vertical-align mais on m'avait toujours dit que ça ne servait qu'au table.

Donc, pas têtue, j'ai réessayé, j'ai mis mon image dans une div comme ceci (le lien est indispensable) :

         <div class="MonImageDiv2">
        	<a href="#"><img title="" src="monimage.jpg" alt=""></a> 
        </div>

avec les class suivantes :

.MonImageDiv2 { width:50px; height:50px; text-align:center; overflow:hidden; background:black; float:left  }
.MonImageDiv2 a { font-size:0; vertical-align: middle;  }
.MonImageDiv2 a img { border:0 none; width:50px; vertical-align: middle;  }

Comme ceci j'obtient un carré noir avec une image collée en haut du carré.

Alors, j'ai testé comme ça :

.MonImageDiv2 { width:50px; height:50px; text-align:center; overflow:hidden; background:black;  display:inline; }
.MonImageDiv2 a { font-size:0; vertical-align: middle;  }
.MonImageDiv2 a img { border:0 none; width:50px; vertical-align: middle;  }

Du coup ça s'aligne bien au milieu, mais mon carré n'en est plus un. Et l'overflow ne marche plus

Je ne sais pas comment mixer les 2 solutions.

Est-ce qu'avec ça on se rapproche de l'affichage que tu recherches :

<style type="text/css">
div {
width:50px; 
height:50px; 
line-height:50px; 
text-align:center;
background-color:black;} 
 
img {
width:40px;
border:0;
vertical-align:middle;
}
</style>

<div> 
	<a href="#">
		<img src="..." alt="">
	</a>  
</div>

?

Salut marcv (désolée pour mon temps de réponse)

Le code que tu m'as donné ne marche pas non plus. Je l'ai recopié exactement mais l'image reste alignée en haut.

Ca marche bien chez toi apparemment. Je ne sais plus quoi faire.

Merci en tout cas.

Altai

Bonjour,

j'ai fait d'autres tests en repartant de zéro.
Et j'ai trouvé une solution qui marche nickel sur Firefox et Chrome, et qui marche moyennement sur IE 7 et 8 et pas du tout sur IE 6.
Je m'explique avec un peu de code :

<table class="MonImage" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="middle" align="center">

            <a href="#"><img title="pedro" src="http://t3.gstatic.com/images?q=tbn:Wy1jZzH_68TjcM:http://www.photoway.com/images/jordanie/JRD05_445-arbre-paysage-aride.jpg" alt="pedro"></a> 

	</td></tr></tbody></table>

    <br /><br /><br /><br />

    <table class="MonImage2" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="middle" align="center">

            <a href="#"><img title="pedro" src="http://t1.gstatic.com/images?q=tbn:ANd9GcT1EpGj1w0scpRXsZUW9Y3Q_2ds_vcuZCB65Nuuf6CwXLZKdiI&t=1&usg=__w-ENjEKBcT0mG8qEa-DowKd7bh8=" alt="pedro"></a> 

	</td></tr></tbody></table>

J'ai repris mon système de tableau avec 2 exemples, une image en paysage et une image en portrait.

.MonImage { width:50px; height:50px; overflow:hidden; background:black; display:block; margin:0; padding:0; border:0; }
.MonImage tbody { width:50px; height:50px; overflow:hidden; margin:0; padding:0; border:0; }
.MonImage tr { width:50px; height:50px; overflow:hidden; margin:0; padding:0; border:0; }
.MonImage td { width:50px; height:50px; overflow:hidden; line-height:50px; margin:0; padding:0; border:0; }
.MonImage a { width:50px; height:50px; overflow:hidden; line-height:50px; font-size:0 }
.MonImage a img { border:0 none; width:50px; }

.MonImage2 { width:50px; height:50px; overflow:hidden; background:black; display:block; margin:0; padding:0; border:0; }
.MonImage2 tbody { width:50px; height:50px; overflow:hidden; margin:0; padding:0; border:0; }
.MonImage2 tr { width:50px; height:50px; overflow:hidden; margin:0; padding:0; border:0; }
.MonImage2 td { width:50px; height:50px; overflow:hidden; line-height:50px; margin:0; padding:0; border:0; }
.MonImage2 a { width:50px; height:50px; overflow:hidden; line-height:50px; font-size:0 }
.MonImage2 a img { border:0 none; height:50px; }

Avec ce CSS, ça marche super bien partout sauf sur IE6. Sur IE6, l'image en paysage ne s'aligne pas exactement au milieu (à la limite c'est pas très grave, mon tableau reste à la bonne taille). Le plus gros problème est avec l'image en portrait. Bien qu'elle ait une taille inférieure ou égale à celle du tableau, IE6 crée une marge en dessous de l'image ce qui agrandit la cellule.

Mon problème s'aggrave quand je veux mettre des images de toute taille dans ce tableau. Donc si je change mon CSS :

[...]
.MonImage a img { border:0 none;  }
[...]
.MonImage2 a img { border:0 none;  }

Là IE6/7/8 font un peu n'importe quoi, ils ne considèrent plus l'overflow:hidden; (pourtant j'ai insisté ) et les images s'affichent en entier.

Bref, je commence à perdre espoir d'afficher correctement un carré contenant une image alignée en hauteur et en largeur, sur tous les navigateurs (ou au moins IE6/7/8, Chrome, FF et Safari).

Please help !