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!"

[kaninox]

eso esta en un iframe o algo así? digo veo que se corta, pero yo me refiero a lo que pone información estamos hablando de lo mismo???

[kseso?]

Hola Astut.
¿Qué es lo que no se muestra?

¿La parte inferior del bicho grande?
Lógico, está en en el flujo antes que el span, y aunque cambias a z-index 25 al :hover, lo haces sobre todo el contenido de .info.
Si fuera eso, prueba a añadir div.info:hover img {z-index:50;}

¿La información extra?
Prueba a posicionar el span no en base a top, sino bottom, así crecerá con sus contenidos hacia "arriba" de su contenedor.

No se si habré acertado con tus necesidades.

Un saludo

[astut]

Gracias por contestar a ambos,

Kseso me refiero a la informacion extra si, lo que pone "informacion" y se corta, use top o use bottom sige ocurriendo lo mismo, el cuadro se corta, es como si el z-index solo funcionara en el td, si se sale del td, se corta.

A ver ahora

[kseso?]

¿Has investigado a darle a esa celda una clase y jugar con "white-space: pre"?

[astut]

Veras, igual no te has fijado bien, esto funciona de la siguiente forma:
Al pasar el raton por encima del div, la etiqueta span se vuelve visible, si no pasas por encima del div, la etiqueta span permanece invisible, osea es un tooltip.

¿Que clase quieres que de al td?, yo quiero que esto ocurra al pasar el raton por encima del div y no del td.

No se porque no funciona, si al div:hover le doy un z-index 25 y el div sin pasar por encima tiene un z-index 24 y el span esta en position absolute no se porque se corta.

Algo debe estar mal

[Mikmoro]

¿El problema es con qué navegador?

[astut]

Hola Mikmoro, dudo que sea cosa del navegador, he probado en firefox, iexplore y opera y lo mismo.

[Mikmoro]

Ya. ¿Dónde están en el código que has puesto "Mover a casa" y "Soltar", que son lo que tapan el span?
¿son botones de un formulario?

Los botones de formulario siempre traen problemas con la posición z, preo si no los muestras es mucho más difícil saber.

[astut]

E quitado el otro td y sige igual.

[Mikmoro]

No tengo ni idea de qué quieres decir. Si pones el código que has dejado y te explicas, quizá se pueda hacer algo.

[Mikmoro]

Esto es prácticamente tu código pero con dos imágenes mías. ¿No es así como debe funcionar?

[astut]

Si mikmoro, asi debe funcionar.

Si pongo todo el codigo va a ser muy engorroso ya que es php con html (200 lineas).
Si lo veo con el firebug me dice que tiene posicion absoluta y z-index 25 asi que no hay nada que interfiera..

Que puede ser? gracias

[Mikmoro]

Busca las diferencias entre mi ejemplo (que es casi totalmente tu código), y el tuyo.

Y si quieres ayuda, no es necesario poner todo el código, sino la zona completa donde está el asunto, incluyendo los botones y demás. Y por supuesto, no pongas el código PHP, sino el HTML generado en el navegador.

[astut]

Hola gracias por contestar!

Aqui el codigo html del asunto como bien dices:

Código HTML:

<tr>
										<td colspan="2" style="text-align: center;"><h3>Charmander</h3></td>
									</tr>
									<tr>
										<td>
											<div class="info">
                                            	<img src="graficos/mundo/pokemons/004.png" style="width: 96px; height: 96px;" alt="Charmander">
												<span class="pokemon">

									  				<img src="graficos/mundo/pokemons/004.gif" alt="Pokemon"><strong>Informacion extra:</strong><br>
                                            		-&nbsp;<i>Objeto adjunto:</i>&nbsp;No tiene<br>-&nbsp;<i>1&nbsp;Ataque:</i>&nbsp;Arañazo&nbsp;||&nbsp;Pp:&nbsp;35/35<br>-&nbsp;<i>2&nbsp;Ataque:</i>&nbsp;Gruñido&nbsp;||&nbsp;Pp:&nbsp;40/40<br>-&nbsp;<i>3&nbsp;Ataque:</i>&nbsp;No tiene<br>-&nbsp;<i>4&nbsp;Ataque:</i>&nbsp;No tiene<br> </span>

                                        	</div>
										</td>
										<td>
                                        	<p><strong>Nivel:&nbsp;</strong>5</p>
                                            <p></p><div class="info"><strong>Exp.:&nbsp;</strong><span class="pokemon_barra">0/1&nbsp;(0)</span><img src="graficos/barras/pokemon_exp.gif" height="10" width="0"></div>
                                            <p></p><div class="info"><strong>Ps:&nbsp;</strong><span class="pokemon_barra">29/29</span><img src="graficos/barras/pokemon_ps.gif" height="10" width="50"></div>

                                            <p><strong>Estado:&nbsp;</strong><span class="pokemon_estado_normal">normal</span></p>
											<p><input class="mini" value="Mover a caja" onclick="" type="button"></p>
											<p><input class="mini" value="Soltar" onclick="AccionSoltar('65');" type="button"></p>
						</td>
								</tr> 

Saludos!

[Mikmoro]

Vamos, que resulta que sí eran botones (input). Era evidente. Como te dije en el mensaje #9, los botones y la posición z son problemáticos.
Busca por z-index+input que verás montones de problemas como el tuyo y muchas soluciones. No cito ninguna de ellas porque no recuerdo.

El trozo que muestras funciona aparentemente bien en FF2.

[astut]

Hola mikmoro,

No son los botones, he probado dejando solo la columna con la imagen y el tooltip y nada que sige igual, el tooltip se corta en los limites del td...

EDIT: Al fina lel problema era el "overflow: hidden;" que me recomendaron en otro post... claro no era compatible con un tooltip asi que lo he quitado

La proxima vez pondre mas datos.

Mikmoro y los demas gracias por intentar solucionar el problema, ya esta resuelto!

ahora tengo problemas con otro tema: http://www.forosdelweb.com/f77/call-...5/#post3046603

[Mikmoro]

Bueno, quizá hasta que lo abras en IE6.

Por cierto: ¿hay algún overflow en el código CSS que pusiste en el primer post?

En fin, hasta la vista.