:hover :link :active - CSS

JonYeste · #1 (**permalink**) 08/08/2009, 11:59

Wenas

Tengo un problema de incompatibilidad entre el IE y el FF (que raro, no?).

El problema surge cuando aplico a unos enlaces que tengo puestos lo de :hover, :link... y esos, y cuando lo visualizo en los dos navegadores, al parecer el IE respeta lo que se le indica y el FF confunde algunos valores.

Os podría poner mi codigo, pero creo que se ve perfectamente en el siguiente enlace (codigo incluido):

w3schools.com/CSS/tryit.asp?filename=trycss_link

Me gustaría saber por qué hay este tipo de discrepancias entre navegadores, porque cuando veo las paginas web que visito fecuentemente veo los enlaces que utilizan y no les pasa lo que a mi. A lo mejor lo hacen sin utilizar lo de :hover y tal... . Habría otras maneras?

Gracias de antemano.

Mikmoro · #2 (**permalink**) 08/08/2009, 12:09

No estoy muy seguro de a qué te refieres, pero debes respetar siempre el orden que aparece en la página que muestras de ejemplo:

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Los de habla inglesa usan para recordar el orden esto:

Love and hate

JonYeste · #3 (**permalink**) 08/08/2009, 12:16

Si... De eso ya me habia percatado, era una cosa a tener en cuenta, pero no era eso.

Es que, si te fijas, en el IE (por lo menos en mi PC) el enlace (el que pone: This is a link) antes de tocar nada está en rojo pero en el FF(Firefox) está en verde.

Y el color verde corresponde al :visited no al :link

Alguna idea más?

Mikmoro · #4 (**permalink**) 08/08/2009, 16:06

Pues no, eso no es así, así que tu Firefox debe recordar que has visitado ese enlace en algún momento.
Para estar seguros probemos este código:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
li {display: inline;list-style-type: none;}
a:link {color:#FF0000} /* link en rojo */
a:visited {color:#00FF00} /* visited en verde */
a:hover {color:#FF00FF} /* mouse over en lila */
a:active {color:#0000FF} /* selected en azul */
</style>
</head>
<body>
<ul>
<li><a title="Ir al inicio" href="#1">Inicio</a> |</li>
<li><a title="contacto" href="#2">Contacto</a> |</li>
<li><a title="Aviso legal" href="#3">Aviso legal</a></li>
</ul>
</body>
</html>

Puedes probarlo aquí para ver qué ocurre con los enlaces que ya has visitado y los que no.

JonYeste · #5 (**permalink**) 08/08/2009, 16:46

Hola de nuevo

Efectivamente, he probado tu codigo.
En Firefox, la primera vez que habrí tu pagina me salian los enlaces en rojo. Después, una vez que pincho en ellos, acaban en verde.
Más tarde, cuando actualizo la página, o la cierro y la vuelvo a abrir los enlaces siguen en verde, no en rojo.

En cambio en el IE, abro la página por primera vez con los enlaces en rojo y cuando pincho sobre ellos acaban en verde. Después cuando actualizo la página o la vuelvo a abrir, los enlaces recuperan el color rojo.

He probado también en mi pagina, cambiar de "#" a "#a1" por ejemplo, o lo que sea, pero cuando repito la operación de pinchar en los enlaces, me pasa lo mismo, se quedan con el color de ":visited", en cambio en el IE, no.
Eso si, cuando cambio de nuevo el "#a1" a por ejemplo "#b1" el enlace recupera el color que quiero. Pero claro, lo que estoy haciendo es cambiar el enlace, y yo en un futuro no quisiera cambiar el enlace.

De alguna manera como dices tu, mi FF, reconoce el enlace. Es problema del codigo o del FF, al final?

Quedo a la espera de vuestra respuesta, gracias

Mikmoro · #6 (**permalink**) 08/08/2009, 17:14

Cita:

Iniciado por JonYeste

Es problema del codigo o del FF, al final?

Bueno, ahora se entiende mucho mejor tu consulta.

A mi parecer, no es error de código ni de FF; simplemente es una diferencia de concepto.
Cuando yo pienso en un enlace visitado, no lo pienso como "visitado ahora, durante esta sesión", sino como visitado en general. Mientras que un navegador lo interpreta como "visitado en esta sesión", el otro lo hace como "visitado hasta que tu navegador y tu proveedor de conexión borren su caché".

¿Cuál es preferible? a gustos
¿Cómo se puede evitar? puede que con la metatag no-cache o expires, pero no estoy seguro.
¿Tienes algún ejemplo de las que dices que no ocurre el segundo caso en FF? si lo adjuntas, quizá se pueda averiguar cómo lo hacen.

De todos modos, imagino que te estás refiriendo a IE7, porque tanto FF como Chrome y Opera lo hacen igual (y luego ya IE6 de otra manera más).

JonYeste · #7 (**permalink**) 08/08/2009, 17:39

A...

Vale, ahora voy entendiendo más las cosas.

Hm... si, bueno, tengo el IE8.
Entonces, en cuanto a codigo, la cosa tira bien, es sólo hasta que se borre su rastro, el caché como tu lo llamas, no? vale.

En los ejemplos a los que anteriormente me referí, si por ejemplo visitas esta pagina (que no tiene nada raro): armaholic.com/index.php, verás al costado izquierdo una columna con varios menús, cuando pasas sobre ellos se ponen de otro color y tal, y cuando pinchas en ellos no pasa nada, se queda como estaba al principio, y eso lo veo bien tanto en FF como en el IE, y es por eso como en otras páginas webs que me gustaría hacerlo así.

También conozco otras maneras que no sé si harán lo mismo o serán tan profesionales como otras:

· Por ejemplo, en la propia etiqueta del enlace poner "onmouseover, onmouseout, onclick..." y con eso sustituir a lo de ":link, : visited"

· O hacerlo por JS, aunque eso no tendría mucho sentido... , ya que das más vuelta.

Por cierto, antes me dijiste que a ti no te pasaba lo que a mi. Me refiero, que tú a traves del firefox ves los enlaces de nuevo en rojo?

De todas maneras, gracias por las respuestas

Mikmoro · #8 (**permalink**) 09/08/2009, 08:12

Cita:

Iniciado por JonYeste

En los ejemplos a los que anteriormente me referí, si por ejemplo visitas esta pagina (que no tiene nada raro): armaholic.com/index.php, verás al costado izquierdo una columna con varios menús, cuando pasas sobre ellos se ponen de otro color y tal, y cuando pinchas en ellos no pasa nada, se queda como estaba al principio

Claro, pero es simplemente que no tienen :visited ni :active, sin más. No han querido indicar de ninguna manera un link ya visitado, y eso es todo.

Cita:

Iniciado por JonYeste

· Por ejemplo, en la propia etiqueta del enlace poner "onmouseover, onmouseout, onclick..." y con eso sustituir a lo de ":link, : visited"
· O hacerlo por JS, aunque eso no tendría mucho sentido... , ya que das más vuelta.

No, pero ambos ejemplos son javascript. No creo que sea necesario para un caso como el que citas.

Cita:

Iniciado por JonYeste

Por cierto, antes me dijiste que a ti no te pasaba lo que a mi. Me refiero, que tú a traves del firefox ves los enlaces de nuevo en rojo?

No, esto era sólo cuando no entendía tu consulta; los veo como tú.

JonYeste · #9 (**permalink**) 09/08/2009, 08:44

De acuerdo,

Cita:

Claro, pero es simplemente que no tienen :visited ni :active, sin más. No han querido indicar de ninguna manera un link ya visitado, y eso es todo.

Pero, una ultima duda, si no ponen :visited ni :active y visitas el enlace, :visited queda de un color morado (a lo mejor, el predeterminado). Lo habrán anulado de alguna manera? Como?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
li {display: inline;list-style-type: none;}
a:link {color:#FF0000} /* link en rojo */
a:visited {} /* visited en verde */
a:hover {color:#FF00FF} /* mouse over en lila */
a:active {} /* selected en azul */
</style>
</head>
<body>
<ul>
<li><a title="Ir al inicio" href="#1">Inicio</a> |</li>
<li><a title="contacto" href="#2">Contacto</a> |</li>
<li><a title="Aviso legal" href="#3">Aviso legal</a></li>
</ul>
</body>
</html>

Este es el código que anteriormente me diste, en él he quitado los valores del :visited y del :active. Y si pruebas el código (en el FF), el enlace queda en morado. Cosa que en la página web que te di antes (armaholic.com/index.php) no pasa.
Supongo que lo habrán omitido de alguna manera.
Normalmente las páginas webs, como en la que estamos ahora mismo, usan este tipo de tecnica? O sea, lo de: a:link, :visited, :hover...

Gracias de nuevo

Mikmoro · #10 (**permalink**) 09/08/2009, 10:51

Es fácil: quita el visited y el link, y deja sólo el color que quieres para el enlace en general, y si lo deseas el :hover

a {color:#FF0000} /* link en rojo */
a:hover {color:#FF00FF} /* mouse over en lila */

JonYeste · #11 (**permalink**) 09/08/2009, 11:03

Oki doki

Creo que me ha quedado todo claro, doy por solucionado este tema pues.

Molto grazie por las respuestas Mikmoro.