Buenas!
Tengo un tooltip hecho solo con CSS. Cuando paso arriba de un link el tooltip aparece y cuando suleto desaparece.
En IE cuando aparece en lugar de aparecer sobre el resto del contenido, hace que el contenido que esta despues de el en el codigo, se corra hacia abajo.
Código PHP:
<div id="forms-box-2">
<a href="#" class="info">¿Cual es el tema del dia? (este es el link del tooltip)<span>Este es el texto que va a aparecer en el tooltip</span></a>
<form id="submitform" action="" method="post">
<h3>Titulo</h3>
<div class="form-left">
<fieldset>
<p>Tu nombre</p>
<input type="text" name="name" />
</fieldset>
<fieldset>
<p>Tu e-mail</p>
<input type="text" name="email" />
</fieldset>
</div>
<div class="form-right">
<fieldset>
<p>Mensaje</p>
<textarea rows="5" cols="20" name="message"></textarea>
</fieldset>
</div>
<div class="enviar">
<fieldset>
<input type="submit" value="Enviar" alt="Enviar" class="submit" />
</fieldset>
<div id="error"></div>
</div>
</form>
</div>
Código HTML:
#forms-box-2{
width:430px;
margin:20px 20px 5px 20px;
padding:0;
float:left;
}
.form-left{
width:210px;
float:left;
}
.form-right{
width:210px;
float:right;
}
.enviar{
width:430px;
float:left;
margin:0;
padding:0;
}
a.info{
position:relative;
z-index:24;
text-decoration:none;
}
a.info:hover{
z-index:25;
}
a.info span{
display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:25px;
left:-108px;
width:300px;
border:3px solid #97add2;
background-color:#e3edfe;
color:#000;
padding:8px 10px;
}
El problema parece estar en el position:absolute. Es como que no lo toma. En en resto de la web tengo más positions absolute y relative, no se si tendra que ver con esto.
Aqui pueden ver una captura del error.
Espero puedan ayudarme.
Muchas gracias!