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"> <link rel="stylesheet" href="error.css" type="text/css"> <script language="javascript" type="text/javascript" src="abreventana.js"></script> <body style="font-family: Arial; font-size: 10pt; text-align:left" text="#800000" bgcolor="#CC9900" background="fondoflores2t-25.jpg">
<table border="0" width="770" cellspacing="7" cellpadding="0" id="table2"> <?php
include ('fotos_aleatorias.php');
?>
<table border="0" width="770" cellspacing="0" cellpadding="10" id="table3">
<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>
<table border="0" width="770" cellspacing="7" cellpadding="7" id="table1">
<td width="770" background="fonfloverde-2t-24-7.jpg">
<!-- Comienza tabla limpia -->
<table class="contenido"> <th>CURSO
<br/><span class="miniatura"><b>Nota:
</b> Ratón sobre el título
<br/>muestra
presentación del curso.
</span></th><!-- 24 -->
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"> <b>Presentación:
</b><br/> Es un tema
<!-- 23 -->
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"> <b>Presentación:
</b><br/> 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"> <b>Presentación:
</b><br/> Son dos temas
<!-- 20 -->
Comienzo del curso anual:
<br/><a style="z-index: 20;" class="titleazul"><span><img border="0" src="arrow_r_white022.gif"> <b>Presentación:
</b><br/> Es un tema
<!-- 19 -->
<td><a style="z-index: 19;"class="title">"
<b>Mi trabajo
</b>"
<span><img border="0" src="arrow_r_white022.gif"> <b>Presentación:
</b><br/> Es un tema
<!-- 18 -->
<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"> <b>Presentación:
</b><br/> Es un tema
<!-- 16 -->
<td><a style="z-index: 16;" class="title">"
<b>La atmósfera
</b>"
<span><img border="0" src="arrow_r_white022.gif"> <b>Presentación:
</b><br/> Es un tema
<!-- 15 -->
<td><a style="z-index: 15;" class="title">"
<b>Mesas
</b>"
<span><img border="0" src="arrow_r_white022.gif"> <b>Presentación:
</b><br/> Es un tema
<!-- 14 -->
<td><a style="z-index: 14;" class="title">"
<b>Ayuda
</b>"
<span><img border="0" src="arrow_r_white022.gif"> <b>Presentación:
</b><br/> Es un tema
<!-- Termina tabla limpia -->
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;
}