Posición relativa de tooltip con css

Caminantejm · #1 (**permalink**) 31/08/2012, 11:29

Tengo un problema ya varios días y no consigo resolverlo.
- Según el código css, el tooltip debería aparecer a continuación del nombre del curso como así sucede -extrañamente y por un vez- en IE8. No así en Mozilla que lo coloca en la posición top:0 y left:0. El contenedor tiene posición relativa y parece que todo está bien. He probado de muchas maneras y no lo consigo.

- Lo he resuelto adjudicando un top y left, pero ya no es igual pues lo que quiero es que lo resuelva con auto, que para eso está.

- A veces, cuando se le ocurre, sí que lo resuelve bien. Pero es aleatorio. Por ejemplo, si quito una fila quizás resuelva bien. ¿?

---> He puesto todo el código pero el problema está en title
---> Si quito elementos div o table también resuelve mejor. Pero no entiendo la razón. Por eso he puesto todo el código.

Saludos y gracias de antemano.
Caminantejm.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head>
<link rel="stylesheet" href="error.css" type="text/css">
<script language="javascript" type="text/javascript" src="abreventana.js"></script>
</head>
<body style="font-family: Arial; font-size: 10pt; text-align:left" text="#800000" bgcolor="#CC9900" background="fondoflores2t-25.jpg">
 
<div align="center">
    <table border="0" width="770" cellspacing="7" cellpadding="0" id="table2">
        <tr>
            <td>
            <p align="center">
            <?php
            include ('fotos_aleatorias.php');
            ?>
            </td>
        </tr>
    </table>
</div>
<div align="center">
        <table border="0" width="770" cellspacing="0" cellpadding="10" id="table3">
            <tr>
                <td>
                
    <div class="hovermenu">
    <ul>
    <li><a href="index.php">Inicio</a></li>
    <li><a href="presenta2.php">Presentación</a></li>
 
    <li><a href="formacion2.php">Formación</a></li>
    <li><a id="current" href="calendario2.php">Calendario</a></li>
    <li><a href="noticias2.php">Noticias</a></li>
    <li><a href="crecer2.php">Aportaciones</a></li>
 
    <li><a href="direccion2.php">Dirección</a></li>
    </ul>
    </div>
                </td>
            </tr>
        </table>
        
</div>
<div align="center">
    <table border="0" width="770" cellspacing="7" cellpadding="7" id="table1">
 
        <tr>
            <td width="770" background="fonfloverde-2t-24-7.jpg">
 
<!-- Comienza tabla limpia -->          
    
<table class="contenido">
        <tr class="cabecera">
    <th>FECHA</th>
    <th>CURSO<br/><span class="miniatura"><b>Nota:</b>&nbsp;Ratón sobre el título<br/>muestra 
                    presentación del curso.</span></th>
    <th>ORIENTA</th>
    <th>LUGAR</th>
    <th>ORGANIZA</th>
    </tr>
<!-- 24 -->
        <tr class="normal">
    <td>Septiembre -23-</td>
    <td><div class="anual">
        Comienzo del curso anual:<br/><a style="z-index: 24;" class="titleazul">"<b>Práctica</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
        </div>      
                                                                                    </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 23 --> 
        <tr class="normal">
    <td>Septiembre</td>
    <td><div class="anual">
        Comienzo del curso anual:<br/><a style="z-index: 23;" class="titleazul">Grupo 1: "<b>Ciclo ADN</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a><br/> <!-- Atención este <br/> -->
        
<!-- 21 -->
    <a style="z-index: 21;" class="titleazul">Grupo 5: "<b>Motor</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Son dos temas
</span></a>
        </div>
                                                                                        </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 20 --> 
        <tr class="normal">
    <td>Septiembre</td>
    <td><div class="anual">
    Comienzo del curso anual:<br/><a style="z-index: 20;" class="titleazul">
        "<b>Las ruedas</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
        </div>                                                                                      </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 19 --> 
        <tr class="normal">
    <td>Septiembre</td>
    <td><a style="z-index: 19;"class="title">"<b>Mi trabajo</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
                                                                                        </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 18 --> 
        <tr class="normal">
    <td>Octubre</td>
    <td><a style="z-index: 18;" class="title">"<b>Introducción a la biología.</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
                                                                                        </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 16 --> 
        <tr class="normal">
    <td>Diciembre</td>
    <td><a style="z-index: 16;" class="title">"<b>La atmósfera</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
                                                                                        </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 15 --> 
        <tr class="normal">
    <td>Enero</td>
    <td><a style="z-index: 15;" class="title">"<b>Mesas</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
                                                                                    </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
<!-- 14 --> 
        <tr class="normal">
    <td>Febrero</td>
    <td><a style="z-index: 14;" class="title">"<b>Ayuda</b>"
<span><img border="0" src="arrow_r_white022.gif">&nbsp;<b>Presentación:</b><br/>
&nbsp;&nbsp;&nbsp;Es un tema
</span></a>
                                                                                    </td>
    <td>curso</td>
    <td>curso</td>
    <td>curso</td>
    </tr>
    
</table>
<!-- Termina tabla limpia -->           
            </td>
        </tr>
    </table>
</div>
</body>
</html>

Código CSS:

Ver originalbody {color: #ffffcc; margin: auto;}
 
a  {              /*   Se elimina subrayado en enlaces  -Volver-*/
    text-decoration: none;
    color: maroon;
}
 
.title { position: relative;
z-index: 0;
}
 
 
.title:hover { background-color: transparent;  /* transparent  */
color: #be00bf;
z-index: 1;
}
 
.title span {border: 1px solid white;
padding: 5px;
position: absolute;
text-decoration: none;
background-color: #bc00bd;
color: white;
width: 34em;
text-align: left;
visibility: hidden;
font-size: 0.9em;
line-height: 16px;
}
 
.title:hover span { visibility: visible;
top: auto; /*1.3em */
left: auto;  /*10em */   /* 4px va en la vertical: 25px se adentra un poco*/
}
 
 
  
/* title es el más numeroso */
               /* title2 - inmediato debajo de última línea*/
/* con tiempo hay que investigar la colocación de <br/> para evitar dos title*/
 
 
/* titleazul*/
 
.titleazul { position: relative;
z-index: 0;
}
 
.titleazul:hover { background-color: transparent;  /* transparent */
color: blue;
z-index: 1;
}
 
.titleazul span { border: 1px solid white;
padding: 5px;
position: absolute;
text-decoration: none;
background-color: blue; /* #bffeff */
color: white;  /* #3E1F00 */
width: 30em; /* 35em */
text-align: left;
visibility: hidden;
font-size: 0.9em;
line-height: 16px;
}
 
.titleazul:hover span { visibility: visible;
top: auto; /*1.3em*/ /*20px*/ /*auto: superior parent*/
left: auto;  /*10em*/ /*150px*/ /*auto: final del texto o de dcha. imagen*/
}
 
/* titleazul2 El 29-08-2012 no hay ninguno. */ 
 
/*------------------ tabla principal -----------------------*/
 
table.contenido {border: 4px double #6b8e23;
border-collapse: collapse;
border-spacing: 10px 5px; /*no tiene sentido con collapse */
color: maroon;
    width: 800px;
    background-image: url(fonfloverde-2t-24-7.jpg);
}
 
tr.cabecera {height: 60px;
background-image: url(alfa40.png);}
 
.contenido td, th {border: 1px solid #556b2f;
    font-weight: bold;
    padding: 5px;   
}
 
.normal td, .normal td a {font-weight: normal; 
color: #336600;
line-height: 1.5;}
 
.miniatura {color: #996633;font-family: Verdana;
font-size: 7pt;font-weight: normal;
}