Height:100% mal interprété par firefox

Bonjour,
longtemps lecteur d'alsacréations, voici mon premier post. J'ai recherché sur le forum un sujet similaire et n'ai rien trouvé, si je me suis trompé, je m'excuse d'avance.

Je créer un système de vignette sur un site actuellement en développement.
J'ai une liste contenant des images. Celle-ci via le css se transforme en blocks d'hauteur et de largeur définie:

.image-marge ul li {
	position:relative;
	display:block;
	float:right;
	width:150px;
	height:150px;
	margin-left:5px;
	margin-bottom:5px;
	overflow:hidden;
	text-align:center;
	background-color:#000000; 
}

les images sont ensuite forcées en largeur ou en hauteur (si l'image est en portrait, l'élément li prend la classe .vertical, et en paysage . horizontal)

.horizontal img {
	position:relative;
	height:100%;
	width:auto;
}	

.vertical img {
	position:relative;
	width:100%;
	height:auto;
}

tout fonctionne à merveille sur safari ou chrome, mais firefox ne redimensionne pas les images contenu dans les <li> possédant la classe .horizontale
Comme si il n'interprétait pas correctement height:100%;
Un exemple est visible à la page suivante :
http://www.violonaroue.fr/spip.php?rubrique11

Si quelqu'un à une piste... Merci beaucoup

J'ai le même rendu que chrome avec FF 17.0.1.. Juste que les vidéos passent au dessus du span contenant l'image..

Quelle version de FF utilises-tu ?

J'utilise la version 17.0.1, mais je fait aussi des tests avec des versions antérieures, et j'ai le même résultat sur toutes les versions de ce navigateur. Ici une capture d'écran :
http://www.violonaroue.fr/squelettes/img/firefox.tiff

Pour les vidéos et le problème de profondeur, je suis dessus, et ce qui est étrange est que chez moi elle passe bien en dessous de l'agrandissement.

bizarre bizarre...
Modifié par emmanuel_K (02 Jan 2013 - 14:03)

Bonjour,

J'ai un rendu correct sur (Mac) Safari, FF, Chrome et Opéra. Je vais tester sur Pc....