[Résolu] Dépassement de contenu

Bonsoir, j'ai un petit problème à l'adresse suivante

http://www.remi-deoliveira.com/galerie/index.htm

Voici le code Css correspondant :

*{
	margin:0;
	padding:0;
	border:0;
}
#fleur{
	width:500px;
}

#fleur span{
	display:table-cell;
	vertical-align:middle;
	padding:5px;
}

et le code html

<div id="fleur">
	<span><a href="#1" title="Orange Rose" ><img src="1.jpg" alt="Orange Rose" /></a></span>
	<span><a href="#2" title="African Daisy" ><img src="2.jpg" alt="African Daisy" /></a></span>
       .........
       <span><a href="#10" title="Valdés Flowers" ><img src="10.jpg" alt="Valdés Flowers" /></a></span>
</div>

Sous IE cela marche impeccable c'est à dire que les images vont à la ligne (puisque le div fleur fait 500px en width) mais sous firefox les images restent sur la meme ligne et font du coup apparaître une barre de défilement horizontale sur la page.

Quelqu'un peut-il m'aider ?

Edit: chose bizarre. En rechargeant plusieurs fois la page, le résultat de l'affichage des images n'est pas le même. une fois il y a deux lignes, des fois une seule
Modifié par ashesheart (21 Mar 2008 - 22:57)

ashesheart a écrit :
mais sous firefox les images restent sur la meme ligne et font du coup apparaître une barre de défilement horizontale sur la page.

Ben si tu demandes à tes span de se comporter comme des cellules de tableau, c'est plutôt normal. Le rendu de Firefox est donc correct. Celui d'IE est incorrect car ce navigateur (avant sa version 8 ) n'implémente pas display: table-cell.

bonsoir,

tu en fait trop

un simple :

#fleur  img {

	vertical-align:middle;
	padding:5px;
}

... devrait suffire, ton span a l'air a priori inutile sauf a définir éventuellement des marges entre les liens.

GC

<edit>

a écrit :

Edit: chose bizarre. En rechargeant plusieurs fois la page, le résultat de l'affichage des images n'est pas le même. une fois il y a deux lignes, des fois une seule eek

c'est du au fait que tu sert un display:table-cell sans avoir au prealable definie un display:table ou table-row au conteneur parent , le moteur de rendu tente a sa maniere de corriger sans vraiment savoir si il doit corriger en passant le parents en display:table ou garder les span en inline par defaut .... Chaque navigateur tente a sa maniere de corriger les erreurs ou incoherence de codage tant html que css avant de l'afficher.

[s]IE serait un champion en la matiere [/s] .. oups pas de troll gratuits .

</>
Modifié par gcyrillus (21 Mar 2008 - 22:59)

Merci pour ton aide, c'était la bonne méthode.
Modifié par ashesheart (21 Mar 2008 - 22:57)