Div no se muestra absoluto

[astut]

Hola, estoy desarrollando un juego web de pokemon y tengo una seccion "equipo" donde se muestran los pokemon de cada entrenador, al pasar el raton por encima se muestra un div absoluto con sus detalles, pero el problema esque no es del todo absoluto, sino que se tapa, he capturado una imagen para que veais el problema:


Este es el codigo:

Código HTML:

<td style="width: 33%;">
  <table style="display: inline;">
    <tr>
      <td colspan="2" style="text-align: center;"><h3><?php echo $pokemon['nombre']; ?></h3></td>
    </tr>
    <tr>
      <td>
        <div class="info">
          <img src=<?php echo'graficos/mundo/pokemons/'.$pokemon['numero'].'.png'; ?> style="width: 96px; height: 96px;" alt=<?php echo $pokemon['nombre']; ?> />
	  <span class="pokemon">
	    <img src=<?php echo 'graficos/mundo/pokemons/'.$pokemon['numero'].'.gif'; ?> alt="Pokemon"/>
            <strong>Informacion extra:</strong><br/>

            <!--Aqui se muestran mas datos-->
	  </span>
        </div>
      </td>
    </tr>
</table> 

Este es el codigo css:

Código:

div.info
{
	z-index: 24;
}
div.info:hover
{
    z-index: 25;
}
div.info span
{ 
    display: none;
}
/*Pokemon*/
div.info:hover span.pokemon
{
    display: block;
    position: absolute;
    top: 60px;
    left: 0px;
    width: 200px;
    border: 1px solid #0cf;
    background: #EEEEEE;
    color: #000000;
    text-align: left;
    font-size: 10px;
    padding: 5px;
}

¿Que hay mal? el z-index esta, el position: absolute tambien.. ¿Cual es el problema?

Gracias de antemano!"