Problema con el explorer al interpretar código

[Polesu]

Holas:

he realizado una pequeña galeria de tres fotos que al pasar el cursor sobre una de ellas aparece dicha foto de fondo. Me va bien en todos los navegadores pero en el Explorer sucede que las tres pequeñas fotos que son enlaces, al pasar el cursor sobre alguna desaparecen las demás. Si paso el cursor por la primera foto (la que está más a la izquierda) no pasa nada,pero al pasarlo por la siguiente desaparece la primera y al pasarla sobre la tercera desaparecen las otras dos. Solo sacando el cursor de la zona vuelven a aparecer.

Alguien sabe si hay algún parche o algo para el IE?

[Aresillo]

pues tienes que darnos tu codigo o subirla para que la podamos ver..
de todas formas, creo que esto va en el foro de css..

Ares

[tunait]

Trasladado desde Accesibilidad y usabilidad

[Mikmoro]

Aunque te parezca mentira es mucho más habitual de lo que crees.

Mira este ejemplo a ver si te da alguna referencia sobre cómo solucionarlo.

Generalmente se basará en que necesitas una posición relativa en algún elemento en el que te falte.

[Polesu]

El código que tengo es el siguiente, no logro encontrar la forma de que funcione en el IE. En los demás navegadores funciona perfectamente como os decia.

Xhtml:

<div id="destacados">

<span><img src="http://www.forosdelweb.com/f53/img/4.jpg" class="opcion0" alt="Imagen de fondo 0" /></span>

<ul>

<li class="foto1">

<span class="opcion1">
<img src="imagenes/portada/destacados/aumento/carloau.jpg" width="600" height="300" alt="carlo" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/carlo.jpg" width="200" height="100" alt="carlo" />
</a>
</li>

<li class="foto2">

<span class="opcion2">
<img src="imagenes/portada/destacados/aumento/carlodosau.jpg" width="660" height="300" alt="toreno" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/toreno.jpg" width="200" height="100" alt="toreno" />
</a>
</li>

<li class="foto3">

<span class="opcion3">
<img src="imagenes/portada/destacados/aumento/carlotresau.jpg" width="600" height="300" alt="lores" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/lores.jpg" width="200" height="100" alt="carlo">
</a>
</li>

</ul>

</div>

CSS:

#destacados * {
outline: 0;
margin: 0;
padding: 0;
}

#destacados {
margin: 10px auto 0;
width: 660px;
position: relative;
height: 300px;
border: solid 1px #000;
}

#destacados ul {
list-style-type: none;
position: absolute;
bottom: 10px;
left: 20px;
}

#destacados li {
display: block;
width: 200px;
height: 100px;
position: absolute;
z-index: 1;
}

#destacados .foto1, .foto2, .foto3 {
bottom: 0;
}

#destacados .foto1 {
z-index: 6;
}

#destacados .foto2 {
left: 210px;
z-index: 5;
}

#destacados .foto3 {
left: 420px;
z-index: 4;
}

#destacados span.opcion1, span.opcion2, span.opcion3 {
width: 660px;
position: absolute;
height: 300px;
top:-190px;
z-index: 0;
display: none;
}

#destacados span.opcion1 {
left:-20px;
}

#destacados span.opcion2 {
left:-230px;
}

#destacados span.opcion3 {
left:-440px;
}

#destacados span img {
width: 660px;
height: 300px;
}

#destacados a {
border: 1px solid #f00;
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: #399;
z-index: 10;
}

#destacados li:hover {
z-index: 0;
}

#destacados li:hover a {
background-color: #366;
z-index: 0;
}

#destacados li:hover span {
display: block;
z-index: 0;
}

[Mikmoro]

Mira mi ejemplo. En IE6 sólo los elemetos de enlace (a) puede usar el :hover.

[Polesu]

Iniciado por Mikmoro

Mira mi ejemplo. En IE6 sólo los elemetos de enlace (a) puede usar el :hover.

He visto tu ejemplo mik y falla en el IE también,lo cual quiere decir que este efecto no es del todo compatible aún con el explorer no?

[Mikmoro]

Iniciado por Polesu

He visto tu ejemplo mik y falla en el IE también

¿A qué IE te refieres? porque en IE6 va perfectamente, en IE7 no estaba mirado y ahora veo que las fotos salen algo más arriba de lo debido, pero en ningún caso producen el fallo del que hablabas en tu primer mensaje. Esto era un ejemplo de cómo puedes hacer para eliminar el error del que hablabas.