[RESOLU]Décalage IE et FF

bonjour a tous

j'ai 2 petits problème a comprendre et a régler :

<style type="text/css">
* {padding: 0; margin: 0;}

#thumbnail {
	background-color: #444;
	width: 740px;
	float: left;
	height: 100px;
}
#thumbnail ul {
	list-style: none;
}
#thumbnail ul li {
	display: inline;
	float: left;
	height: 96px;
	width: 236px;
	
}
#thumbnail ul img {
	border: 2px solid #33FFFF;
	height: 96px;
	width: 236px;
}
#thumbnail ul a:hover img {
border: 2px solid #FF0000;	
}
#thumbnail ul li.img_gauche  {
	margin-right: 10px;
}
#thumbnail ul li.img_centre {
	margin-right: 10px;
}
</style>

<div id="thumbnail">
<ul>
 <li class="img_gauche"><a href="#" ><img src="" width="236" height="96" ></a></li>
 <li class="img_centre"><a href="#" ><img src="" width="236" height="96" ></a></li>
 <li><a href="#" ><img src="" width="236" height="96" ></a></li>
</ul>
</div>

j'ai différents décalages :
- sous FireFox : les marges de 10px ne sont pas prisent en compte contrairement à IE
- sous InternetExplorer : la hauteur de mon thumbnail ( 100px) n'est pas respectée

les bordures peut être ?

Merci de me sortir de ce brouillard
Modifié par olimann (11 Oct 2008 - 02:17)

bonjour ,


Pour les images , elle repose par defaut sur le baseline , d'ou la petite marge au dessous . (mettre :vertical-align:top;/*ou bottom */).

Pour la diference des marges , ceci est du a une erreur de ta part :

lles listes devraient etre de 240px de large quand les images font 236 + 2 +2 (les bordures !).

++

Oops !! A force de manipuler ce CSS je ne voyais plus l'évidence
Merci beaucoup gcyrillus tout est rentré dans l'ordre