Firefox : image en position absolute dans un span

Bonjour
,
J'ai un problème avec le navigateur firefox.
Dans une galleries d'images je "redimensionne" mes images afin qu'elle aient toutes une taille 150x150 avec la propriété clip:rect(x x x x);
Seulement avec cette propriété l'objet doit être en position absolute.
Ces images sont chacune placé dans une balise span.

Pas de problème sous chrome et ie cependant avec firefox toutes mes miniatures sont superposées en haut à droite de la page.

Mon code :

<span class="gallerie"><a href="lien.jpg" rel="lightbox">
<img src="thumbnails/lien.jpg" alt="" style="clip:rect(xpx xpx xpx xpx);top:XXpx;left:YYpx;" class="image"></a></span>

.gallerie{
	position: relative; 
	display:inline-table;
	width: 150px; 
	height:150px; 
	border: 2px solid #fff;
	background-color: #000;
	box-shadow: 2px 2px 12px #000;
	margin-bottom: 20px;
	margin-right: 20px;
	}
.image{
	position:absolute;
	margin : 0px;
}

Le problème vient du display du span : inline-table.
Sans cette propriété je n'arrive pas a afficher correctement cote a cote mes span

Merci de votre aide!
Modifié par teebo (07 Dec 2011 - 23:49)

Salut,

Utiliser plutôt max-witdh et mettre le tout dans une liste non ordonnée d'après moi.

D'ailleurs ici ton span ne sert à rien, tu peux très bien mettre toutes les propriétés de ton span sur ton lien

En plus exact.
Voici du code pour exemple de ce que je disais:
HTML

<ul class="gallerie">
<li><a href="./img/lien.jpg" rel="lightbox"><img src="img/lien.jpg" alt=""/></a></li>
<li><a href="./img/lien2.jpg" rel="lightbox"><img src="img/lien2.jpg" alt=""/></a></li>
<li><a href="./img/lien3.jpg" rel="lightbox"><img src="img/lien3.jpg" alt=""/></a></li>
<li><a href="./img/lien4.jpg" rel="lightbox"><img src="img/lien4.jpg" alt=""/></a></li>
....
</ul>

CSS

ul.galerie{
border: 2px solid #fff;
background-color: #000;
}
ul.gallerie li{
display:inline-block;
margin: 0 20 px 20px 0;/* top right bottom left */
}
ul.gallerie li a img{
max-width: 150px; /* si au moins une image fait moins de 150px mettre seulement width */ 
max-height:150px; /* si au moins une image fait moins de 150px mettre seulement height */ 
box-shadow: 2px 2px 12px #000;/* mettre peut-être les équivalents -moz- et -webkit-*/
}