a:link a:hover en Internet explorer

gVenom · #1 (**permalink**) 08/04/2009, 10:36

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#alfa{
    position:relative;
    width:258px;
    left:0px;
    float:left;
}
#info-alfa{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:43px;
    left: 97px;
    top: 344px;
    z-index:100;
}
#order-alfa{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:56px;
    left: 182px;
    top: 344px;
    z-index:100;
}
#beta{
    position:relative;
    width:258px;
    left:0px;
    float:left;
}
#info-beta{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:43px;
    left: 357px;
    top: 344px;
    z-index:100;
}
#order-beta{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:56px;
    left: 442px;
    top: 344px;
    z-index:100;
}
#gamma{
    position:relative;
    width:258px;
    left:0px;
    float:left;
}
#info-gamma{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:43px;
    left: 614px;
    top: 344px;
    z-index:100;
}
#order-gamma{
    position:absolute;
    font-size:11px;
    font-family:"Tahoma", Arial;
    width:56px;
    left: 699px;
    top: 344px;
    z-index:100;
}

en firefox se ve bien y en opera, incluyendo los estilos de:

Código CSS:

Ver originala:link{text-decoration:none}
a:visited{color:#990000}
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.

kseso? · #2 (**permalink**) 08/04/2009, 10:56

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:

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.

gVenom · #3 (**permalink**) 08/04/2009, 10:58

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.

Mikmoro · #4 (**permalink**) 08/04/2009, 11:36

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:

gVenom · #5 (**permalink**) 08/04/2009, 11:45

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.

Mikmoro · #6 (**permalink**) 08/04/2009, 11:47

Disculpa: he visto el error y no he hecho ni mirar el asunto. Echo un vistazo al hilo.

Mikmoro · #7 (**permalink**) 08/04/2009, 11:59

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.

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

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.

gVenom · #9 (**permalink**) 08/04/2009, 12:12

Cita:

Iniciado por Mikmoro

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.