INFOBULLE - Problème avec CSS

Bonjour,

Voici le lien de pour voir le problème:
http://www.wokus.fr/m_pano1.php?perso=1&idm=170

Quand vous passez sur l'espèce d'oeuf doré en haut à gauche l'infobulle passe... sous l'image juste à droite.
2h de recherche je craque et je sollicite votre aide.

Code CSS:
.tooltip
{
text-decoration:none;
position:relative;
}
.tooltip:hover
{
text-decoration:underline;
}
.tooltip span
{
display:none;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:black;
background:white;
opacity:0;
}
.tooltip span img
{
float:left;
margin:0px 8px 8px 0;
}
.tooltip:hover span
{
display:block;
opacity:1;
position:absolute; top:0; left:0;
z-index:auto;
width:auto;
border:2px solid black;
margin-top:12px;
margin-left:45px;
overflow:hidden;;
}

Appel dans le code HTML:
<a class="tooltip" href="dofus.php?numdo=6">
<img src="objets/dofus/dofus20png/23012_0.png" width="42" height="42" border="0" />
<span>
<table border="0" cellspacing="2" cellpadding="1">
<tr>
<td style="border-bottom-width:1px; border-bottom-color:#bbad86; border-bottom-style:solid" nowrap="nowrap" bgcolor="#E8D5A3"><font color="#5c4124" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>CARACTERISTIQUES</strong></font> </td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>+1 PA</strong></font></td>
</tr>
</table>
</span>
</a>

Merci d'avance pour votre aide.