CSS : mouseover sur 3 photos aligné, problème de décalage

bonjour

Je voudrais aligner 3 photos et avoir un effet de zoom sur chacunes d'elles quand je passe la souris dessus.
J'ai donc crée le code suivant :
<div class="galery">
<ul id="rubriques">
<li><a href="#"><img src="image1.gif"/></a></li>
<li><a href="#"><img src="image2.gif"/></a></li>
<li><a href="#"><img src="image3.gif"/></a></li>
</ul>

Pour le code css, je defini mon bloc ul largeur hauteur etc ... en display block
J'ai ensuite le code suivant :
.galery ul li {display:inline;float:left;width:180px;border:1px #ma couleur solid;}

Mon pb c'est que je ne veux pas de bordure et le fond étant non uniforme je ne peux pas sélectionner la meme couleur pour ma bordure. Si j'enlève ma bordure, quand je passe la souris sur une photo, le zoom est normal mais les miniatures de droites se décalent d'un rang. Comment remédier à ce pb ?

img{margin:1px;}
img:hover{border:1px #couleur solid;margin:0;}

Petite remarque : l'utilisation simultanée des propriétés display et float n'est pas utile.
Dans le cas présent, un simple float est suffisant. On rajoutera list-style: none; pour supprimer la puce associée.