Foros del Web » Creando para Internet » CSS »

:hover :link :active - CSS

Estas en el tema de :hover :link :active - CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/08/2009, 11:59
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Exclamación :hover :link :active - CSS

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.
  #2 (permalink)  
Antiguo 08/08/2009, 12:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: :hover :link :active - CSS

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
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 08/08/2009, 12:16
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: :hover :link :active - CSS

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?

Última edición por JonYeste; 08/08/2009 a las 15:08
  #4 (permalink)  
Antiguo 08/08/2009, 16:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: :hover :link :active - CSS

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 08/08/2009, 16:46
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: :hover :link :active - CSS

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
  #6 (permalink)  
Antiguo 08/08/2009, 17:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: :hover :link :active - CSS

Cita:
Iniciado por JonYeste Ver Mensaje
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).
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 08/08/2009, 17:39
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: :hover :link :active - CSS

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
  #8 (permalink)  
Antiguo 09/08/2009, 08:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: :hover :link :active - CSS

Cita:
Iniciado por JonYeste Ver Mensaje
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 Ver Mensaje
· 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 Ver Mensaje
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ú.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 09/08/2009, 08:44
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: :hover :link :active - CSS

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
  #10 (permalink)  
Antiguo 09/08/2009, 10:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: :hover :link :active - CSS

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 */
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 09/08/2009, 11:03
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: :hover :link :active - CSS

Oki doki

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

Molto grazie por las respuestas Mikmoro.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:48.