Foros del Web » Creando para Internet » CSS »

a:link a:hover en Internet explorer

Estas en el tema de a:link a:hover en Internet explorer en el foro de CSS en Foros del Web. Saludos. Bueno, estoy diseñando mi página web para comenzar un negocio de servicio hosting, y apenas comienzo a crearla y ya me quede pegado con ...
  #1 (permalink)  
Antiguo 08/04/2009, 11:36
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Exclamación a:link a:hover en Internet explorer

Saludos.

Bueno, estoy diseñando mi página web para comenzar un negocio de servicio hosting, y apenas comienzo a crearla y ya me quede pegado con una parte. Resulta que voy a poner dos hojas de estilo diferentes para IE6 y otra general, le he puesto este tag para ello:

Código HTML:
<link rel="stylesheet" href="css/div-styles.css" type="text/css" />
<link rel="stylesheet" href="css/txt-styles.css" type="text/css" />
<!--[if !IE]> 
<link rel="stylesheet" href="css/div-styles-IE.css" type="text/css" /> 
<link rel="stylesheet" href="css/txt-styles.css" type="text/css" />
<![endif]--> 
le cargue la hoja de estilos de texto de nuevo ahi solo por si las dudas. Bueno, todo iba bien hasta que llegue a la parte donde estan los servidores, que son imagenes y tienen el texto de info y de ordene ya en un div, encima en posicion absoluta:

Código CSS:
Ver original
  1. #alfa{
  2.     position:relative;
  3.     width:258px;
  4.     left:0px;
  5.     float:left;
  6. }
  7. #info-alfa{
  8.     position:absolute;
  9.     font-size:11px;
  10.     font-family:"Tahoma", Arial;
  11.     width:43px;
  12.     left: 97px;
  13.     top: 344px;
  14.     z-index:100;
  15. }
  16. #order-alfa{
  17.     position:absolute;
  18.     font-size:11px;
  19.     font-family:"Tahoma", Arial;
  20.     width:56px;
  21.     left: 182px;
  22.     top: 344px;
  23.     z-index:100;
  24. }
  25. #beta{
  26.     position:relative;
  27.     width:258px;
  28.     left:0px;
  29.     float:left;
  30. }
  31. #info-beta{
  32.     position:absolute;
  33.     font-size:11px;
  34.     font-family:"Tahoma", Arial;
  35.     width:43px;
  36.     left: 357px;
  37.     top: 344px;
  38.     z-index:100;
  39. }
  40. #order-beta{
  41.     position:absolute;
  42.     font-size:11px;
  43.     font-family:"Tahoma", Arial;
  44.     width:56px;
  45.     left: 442px;
  46.     top: 344px;
  47.     z-index:100;
  48. }
  49. #gamma{
  50.     position:relative;
  51.     width:258px;
  52.     left:0px;
  53.     float:left;
  54. }
  55. #info-gamma{
  56.     position:absolute;
  57.     font-size:11px;
  58.     font-family:"Tahoma", Arial;
  59.     width:43px;
  60.     left: 614px;
  61.     top: 344px;
  62.     z-index:100;
  63. }
  64. #order-gamma{
  65.     position:absolute;
  66.     font-size:11px;
  67.     font-family:"Tahoma", Arial;
  68.     width:56px;
  69.     left: 699px;
  70.     top: 344px;
  71.     z-index:100;
  72. }

en firefox se ve bien y en opera, incluyendo los estilos de:
Código CSS:
Ver original
  1. a:link{text-decoration:none}
  2. a:visited{color:#990000}
  3. a:hover{color:#FF0000}
pero en IE no salen ni los enlaces, aveces me carga uno y si refresco la página se desaparece , esta loco ese navegador. el html va asi:
Código HTML:
<div id="alfa"><img src="http://www.forosdelweb.com/images/alfa.jpg" alt="Plan Alfa" /></div>
    <div id="info-alfa"><a href="#">m&aacute;s info</a></div>
    <div id="order-alfa"><a href="#">ordene ya</a></div>
    <div id="beta"><img src="http://www.forosdelweb.com/images/beta.jpg" alt="Plan Beta" /></div>
    <div id="info-beta"><a href="#">m&aacute;s info</a></div>
    <div id="order-beta"><a href="#">ordene ya</a></div>
    <div id="gamma"><img src="http://www.forosdelweb.com/images/gamma.jpg" alt="Plan Gamma" /></div>
    <div id="info-gamma"><a href="#">m&aacute;s info</a></div>
    <div id="order-gamma"><a href="#">ordene ya</a></div> 
y esta es la página web:

http://yourweblogos.com/samples/gvenom/company/

Pensaba montar eso en flash pero no quiero que la página se vuelva tan pesáda.
Gracias por cualquier ayuda.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 08/04/2009 a las 11:43
  #2 (permalink)  
Antiguo 08/04/2009, 11:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: a:link a:hover en Internet explorer

1º: ie6 sólo reconoce la pseudoclase hover si se aplica a un enlace: "a:hover", pero no sobre otros elementos como cajas contenedoras.
2º: el código html que has puesto tiene todas las pintas de ser una lista ordenada, así que posiblemente te resultará más acertado si usas una de ellas:
Cita:
<ul>
<li><a class="info-alfa" href=".....></li>
<li><a class="order-alfa" href=>...></li>
...
</ul>
Vamos, que no deja de ser un menú de opciones, con la particularidad de que cada enlace quieres que tenga ciertas diferencias respecto a sus hermanos, cuestión que resuelves al aplicar una clase diferente a cada uno de ellos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 08/04/2009, 11:58
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: a:link a:hover en Internet explorer

El problema radica en la posición que esta, creo que no visitaste la página para que veas el asunto.

De hecho no es tanto los hover si no que no me aparece nada en IE. Yo se que el hover funciona con texto y asi es que lo puse.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 08/04/2009, 12:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:link a:hover en Internet explorer

Es que tienes mal puesto el comentario condicional:
<!--[if !IE]>
te sobra el segundo signo de exclamación
<!--[if !IE]>
Así será para todos los IE.

Además estás haciendo que vuelva a leer la misma segunda hoja en caso de que sea IE:
<link rel="stylesheet" href="css/txt-styles.css" type="text/css" />

esto es innecesario, ya que IE la lee la primera vez: primero lee las hojas normales, y luego las específicas para él indicadas en el comentario condicional.

Vamos, que debería quedar así:
Cita:
<link rel="stylesheet" href="css/div-styles.css" type="text/css" />
<link rel="stylesheet" href="css/txt-styles.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/div-styles-IE.css" type="text/css" />
<![endif]-->
  #5 (permalink)  
Antiguo 08/04/2009, 12:45
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: a:link a:hover en Internet explorer

Hola Mik.

ya corregi ese punto, pero aun no trabaja. Acabo de actualizar los link de abajo para ver si el hover funciona, y asi es, el que no funciona es el que esta sobre los div que contienen las imágenes de los server. Solo en FF si se ven.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #6 (permalink)  
Antiguo 08/04/2009, 12:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:link a:hover en Internet explorer

Disculpa: he visto el error y no he hecho ni mirar el asunto. Echo un vistazo al hilo.
  #7 (permalink)  
Antiguo 08/04/2009, 12:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:link a:hover en Internet explorer

Bien. Si en IE6 seleccionas el texto verás a dónde han ido a parar los enlaces (están fuera del luegar que tu quieres, por eso no ves enlaces sobre las palabras que deseas.
El caso es que creo que no es la mejor manera de hacerlo, pero dando por hecho que lo vas a hacer como lo tienes, creo que la mejor manera es que metas los enlaces con el texto dentro de cada caja (de cada servidor), y como esas cajas ya tienen posición relativa, podrás colocar los enlaces tal y como los tienes con posición absoluta mucho más fácil, sin tener que calcular para cada uno, sino para todos igual. Es mucho más fácil, creo.
  #8 (permalink)  
Antiguo 08/04/2009, 13:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: a:link a:hover en Internet explorer

Me explico mejor:
imagina que el HTML de cada caja lo pones así:
Cita:
<div id="alfa"><img alt="Plan Alfa" src="images/alfa.jpg"/>
<a href="#">más info</a>
<a class="ordene" href="#">ordene ya</a>
</div>
Y entonces el CSS así:
Cita:
#alfa{
position:relative;
width:258px;
left:0px;
float:left;
}
#alfa a{
position:absolute;
font-size:11px;
font-family:Tahoma, Arial;
width:43px;
left: 97px;
bottom: 15px;
}
#alfa a.ordene{width:53px;
left: 182px;
}
Así en cada caja. Creo qu más limpio, cómodo y sencillo. No lo he probado en IE6 pero no debería dar problemas: quizá algún pequeñísimo ajuste que deberás corregir con algún important.
  #9 (permalink)  
Antiguo 08/04/2009, 13:12
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: a:link a:hover en Internet explorer

Cita:
Iniciado por Mikmoro Ver Mensaje
El caso es que creo que no es la mejor manera de hacerlo
Bueno, dada mi poca experiencia en css no se me ocurrió nada mas , de hecho iba a quitar eso y hacerlos en flash que me es mas fácil, pero siempre me puse a hacerlos en css. Si conoces (que doy por hecho) una mejor manera dime como puede ser? ya que me interesa que me quede bien el código para buscar un buen posicionamiento cuando la suba a un servidor.

Gracias por la ayuda Mik, ahora pruebo tu solución.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
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 00:09.