Une image bien encadrée dans un <a>

Bon alors mon problème...
Je travaille en ce moment sur un portfolio sur internet, et pour cela, arrive un moment où j'ai besoin d'avoir des images me servant de liens.
J'ai donc utilisé une structure <ul><li><a>, afin d'avoir des liens bien organisés, et stylisables...
J'ai rajouté des "borders" à chaque <a> afin d'avoir des liens un peu stylisés, mais autant sur IE ces borders vont bien entourer l'image comme je veux, autant sous FF, la hauteur de l'encadrement est beaucoup plus petite que l'image qu'elle contient :

IE:
http://www.aquineascollection.com/vhdwebpack/vhd/aquineas/IE.jpg

FF:
http://www.aquineascollection.com/vhdwebpack/vhd/aquineas/FF.jpg

J'ai essayé de bricoler en insérant un "font-size" comme attribut, afin de forcer la hauteur de la cellule, mais il apparait alors un décalage entre la border du bas etl'image..
bref , je m'en sors pas, et j'esperais que qql1 pourrait me donner un coup de main, merci!

Le code CSS :

ul#thumb
{
margin-top:1px;
padding:0px;
}

#thumb li
{
display:inline;
list-style-type:none;
margin-left:5px;
margin-right:5px;
padding:0px;
width:62px;
height:62px;

}

#thumb a
{
display:inline;
border:0px;
width:62px;
height:62px;
overflow:auto;
}


#thumb a:link,#thumb a:visited
{
width:62px;
height:62px;
border:1px solid black;
border-right:3px solid black;

}

#thumb a:hover
{
width:62px;
height:62px;
border:1px solid #FF0000;
border-right:3px solid #FF0000;
}

(la hauteur de l'image que j'insère est 62px)
(Chaque ligne d'image est gérée par un <ul> différent de celles qui l'entourent)

Le code HTML:

<div>
   <ul id="thumb">
       <li><a href="x"><img src="Photos/1mini.jpg" border="0"></a></li>
       <li><a href="x"><img src="Photos/4mini.jpg" border="0"></a></li>
       <li><a href="x"><img src="Photos/5mini.jpg" border="0"></a></li>
   </ul>
</div>

Est ce la méthode qui est mauvaise? Je ne peux pas vraiment passer par un background-image car les cases son générées par un script php en fonction de la section photo visitée...
Merci d'avance pour votre aide!

Bonjour Aquineas,

Tu ne peux pas donner une hauteur fixe à un élément de type en-ligne. Or, tes liens (éléments a) sont des éléments de type en-ligne.

Il est probable qu'il te faille passer soit les images soit les liens en display:block;, et jouer alors avec les flottants.

Plus simple peut-être : placer les bordures directement sur les images, pas sur les liens.

D'accord je vais voir ça merci pour ton aide!