ie6 + Css - Problema en div que contiene 3 imagenes ocultas k se muestran una a una

[Exonico]

Hola a todos,

Tengo un problema con un Div en IE(como siempre).

El div tiene 3 imágenes que hacen efecto de aparición una a una a travez de mootools; El caso es que todo funciona bien en Firefox y Chrome al igual que en IE en un principio, pero cuando se re dimensiona la pagina este se mueve verticalmente saliendose de su posición.

El codigo css es este:

#caja
{
position: absolute;
}
#caja span img
{
display: block;
float: left;
}
.mascara
{
position: relative;
width: 710px;
height: 220px;
overflow: hidden;
}

<div class="mascara">
<div id="caja">
<span><img src="#" alt="Expe" /></span>
<span><img src="#" alt="capa" /></span>
<span><img src="#" alt="ferro" /></span>
</div>
</div>

Espero me puedan ayudar

Perdon Añado el html.

Saludos.

[Mikmoro]

Perdona pero así no podemos saber cómo estás usando esos selectores, por lo que al menos haría falta ver el html para ver cómo los aplicas.

[Exonico]

Ya añadí el html que faltaba...

[Mikmoro]

Supongo que te refieres a que al reducir la ventana una de las imágenes salta hacia abajo.

No es fácil saber, pero yo diría que se debe a que el contenedor de las imágenes (#caja) no tiene tamaño definido. Quizá si le das a esta caja el mismo tamaño que a su caja "padre" (710px), las cajas no salten, pero bueno, es un poco jugar a adivino, porque sin saber el tamaño de tus imágenes, qué hace el script, etc., es un poco difícil imaginar.

[Mr-Ubuntu]

Mira yo uso este script. Generalmente lo que hace es poner todos tus objetos de lapagina en la posición que tu le indiques, y lo hace relativo para diferentes resoluciones que considero que sería lo mismo como si cambias de tamaño tu pagina (maximizar o restarurar)

Dentro de esta <div> estan todos los elementos de tu pagina
<div id="xr" style="width: 765px; height: 890px; position:absolute; top:0px; left:50%; margin-left: -383px; clip: rect(0px 765px 890px 0px); visibility: visible;">

y con esta linea lo llamas para que aplique los cambios
<script type="text/javascript">var xr=document.getElementById("xr")</script>


Prueba y luego me comentas que pasó.

[Exonico]

Las 3 imagenes tienen la misma resolución 710 x 220, las imagenes no saltan se mantienen ocultas donde deben ir.

El problema es que cuando se redimenciona el navegador gradualmente deja su posicion(el div completo) y se encima en los demás divs. El problema ocurre unicamente cuando se redimenciona el IE pero si actualizas la pagina de nuevo el div se vuelve a poner en su lugar, sea cual sea el tamaño de la ventana del navegador.

Espero haberme explicado un poco mejor.

Veo que no es un problema muy comun, agradezco mas su ayuda!!

[Mikmoro]

Por el código que muestras no le veo ninguna expliación a eso que comentas. Pero si cada imagen ocupa todo el contenedor cuando se hace visible, ¿exactamente para qué usas el float left?

#caja span img
{
display: block;
float: left;
}

[Exonico]

Esto es para que acomode las imágenes dentro del contenedor y que cuando vaya a hacer el efecto javascript de aparición las muestre correctamente y en el orden.

Seguiré buscando la solución, en cuanto la haye la posteare.

Muchas gracias y saludos

[Mikmoro]

El problema tiene que estar o bien en las propiedades que le añadas mediante mootools (bordes, display, etc.), o en el resto del código que no vemos, porque el código que meustras no tiene problema.

En todo caso, recuerda que cuando a una caja le pones posición absoluta deberás al menos indicarle dos coordenadas (left y top, por ejemplo), aunque sean a cero, porque si no IE6 les asigna valores a esas coordenadas que no son cero, y esto suele causar muchos problemas y quebraderos de cabeza.

[Exonico]

Solucionado.

Mikel tenias razon para evitar que el div se saliera horizontalmente del otro div solo le aplique lo que me comentaste, en este caso left y right igualados a 0.
los cambios quedaron de esta forma en .mascara:

.mascara
{
position: relative;
width: 710px;
height: 220px;
overflow: hidden;
left: 0px;
right: 0px;
}

[Exonico]

Te debo una maestro, Muchisimas gracias.

Ahora como le hago para notificar que el problema ya esta solucionado, o eso lo hacen únicamente los moderadores???

[Mikmoro]

De nada, es un placer.

Nada, dejas el hilo tal cual y queda solucionado. Así si alguien entra a leerlo puede ver la solución y que está resuelto.

Saludos.

[Exonico]

Perfecto,

Tons así keda.

Saludos.