Images qui influencent la taille de cellules (firefox)

Bonsoir.
Mon problème est uniquement à considérer sous Firefox.
J'utilise un tableau de cases avec des pions pour un jeu. Je dois envisager le cas où plusieurs pions se retrouvent sur la même case. Jusqu'à 4 pions peuvent ainsi se retrouver dans une cellule <td> de mon tableau.
Grâce au CSS, je suis parvenu à obtenir un chevauchement et un positionnement des pions comme je souhaitais, seulement la taille des <td> ajuste sa taille impassiblement en considérant les images comme étant côte à côte.
J'ai essayé des propriétés CSS comme display, overflow, width sur les <td> mais rien n'y fait.

Mes images ont comme propriétés de style

<img src=images/jaune.gif width=35 height=35 style='position:relative;left:-5px;z-index:+1'>
<img src=images/rouge.gif width=35 height=35 style='position:relative;left:-25px;z-index:+2;'>
<img src=images/vert.gif width=35 height=35 style='position:relative;left:-45px;z-index:+3'>
<img src=images/bonze.gif width=30 height=45 style='position:relative;left:-65px;z-index:+4;clip:rect(1000px,50px,10px,5px)'>

et ma td:

td {text-align:center; white-space:nowrap;}

REmarque: la table est générée par javascript mais ça ne change pas grandchose aux données du problème.

Voici ce que ça donne :
http://www.benjaminraspel.be/exemple_css/jeu.htm

Voici le résultat que je voudrais obtenir (ici avec un seul pion mais je voudrais la même chose avec les 4 pions):
http://www.benjaminraspel.be/exemple_css/jeu2.htm

Je rappelle que je dois solutionner ce problème uniquement pour firefox.
Merci

c'est normal.
C'est le positionnement relative qui cause ces décalages.

Le positionnement relative réserve la place prise par l'élement. Tu peux ensuite le déplacer à ta guise, mais "son empreinte" reste bloquée si l'on peut dire : d'où la taille de ton TD.

tu as juste à Mettre tes td en position:relative et à mettre tes image en position:absolute (et à les placer comme bon te semble pour les empiler).