Cita:
Iniciado por metacortex 
Daz me había hecho la misma observación. Al parecer Firefox toma la capa entera como un enlace, lo que no sucede con IE y Opera (en esos navegadores sí funciona bien el hover sobre las letras). Al final no supe cómo resolverlo.
Al principio ese asunto se me hizo complicado, pero luego le agarré la "maña": Ahí la palabra Okologie está repetida 5 veces. Cada SPAN está posicionado absoluto. El visibility: hidden oculta lo que no quiero que se muestre y dejo libre el pedazo que me interesa, el cual también cambia con el hover.
Hola, Metacortex.
Probablemente tienes este asunto más que olvidado, pero me acabo de enterar hoy mismo de la existencia de esta competencia (he estado mucho tiempo fuera de juego).
La cosa es que decías que no supiste cómo resolver el asunto del Firefox y que siempre se iluminara el último link con la "e" cuando pasabas el ratón por la letra grande.
Por si tienes algo de curiosidad, te cuento cómo lo he resuelto:
- En el selector "a span.letra,h1 a", he cambiado el left:0; por right: 0;
a span.letra,h1 a{font-size:190px;font-weight:bold;position:absolute;
right:0;top:0;color:#122871;background:transparent}
- he aligerado un poco el contenido de los enlaces de esta manera:
Cita: <ul id="toc">
<li><a accesskey="i" href="index.php"><span
class="letra">Ö<span class="inv">kologie
</span></span><span class="titulo ecologia">Inicio</span><span
class="guion"> - </span><span class="subtitulo">Definiendo
conceptos</span></a></li>
<li><a href="hist.php"><span class="letra">ko<span
class="inv">logie
</span></span><span class="titulo historia">Historia</span><span
class="guion"> - </span><span class="subtitulo">¿De
dónde surgió todo?</span></a></li>
<li><a href="obj.php"><span class="letra">lo<span
class="inv">gie
</span></span><span class="titulo objeto">Objeto
de estudio</span><span class="guion"> - </span><span
class="subtitulo">Bajo la lupa científica</span></a></li>
<li><a href="disc.php"><span class="letra">gi<span
class="inv">e
</span></span><span class="titulo disciplina">Disciplinas
relacionadas</span><span class="guion"> - </span><span
class="subtitulo">Metodología investigativa</span></a></li>
<li><a href="rama.php"><span class="letra">e
</span><span class="titulo ramas">Ramas de la
Ecología</span><span class="guion"> - </span><span
class="subtitulo">Ciencias
derivadas</span></a></li>
</ul>
es decir, quitando todo el contenido a la izquierda de cada letra "iluminable".
¿Qué he hecho con esto?
He alineado siempre el span principal ("letra") a la derecha en lugar de a la izquierda. Entonces he eliminado todo el contenido oculto que cada letra que va a ser iluminada tenía a su izquierda.
¿Qué se consigue? que las capas de los span que van a ser iluminadas estén solapadas hacia la derecha, de manera que siempre posicionas el ratón sobre la que quieras, porque hacia su izquierda no hay nada.
¿Por qué? porque el problema que tenías era que cada capa con todo su relleno oculto siempre ocupaba todo el ancho del recuadro de las letras grandes, y conforme aparecían en el flujo del código se iban poniendo sobre las otras. De esta manera, la última era la de la "e", y por eso se iluminaba siempre, porque siempre cubría a las otras.
Ha sido por pura curiosidad y como un ejercicio muy divertido, porque no podía ser que un diseño tan guapo hiciera quedar mal a Firefox
.
El diseño me parece muy, pero que muy bueno. Tienes un gusto con los colores y las formas excelente, de verdad. Me quito el sombrero. Espero que esto no te moleste.
Mikel.