Problema con posición de Divs en IE

[Jask]

Muy buenas, que tal :) ?
Bueno aquí vengo con el dichoso problema del IE XD Ya me rompí la cabeza intentando solucionarlo pero nada de nada.
Os cuento. Tengo un jquery deslizante, en el cual dentro hay un par de divs con na foto y texto. En Firefox se ve de perla, pero en IE falla. Os dejo una mini-captura para que lo vean, aun así les pongo la web:

Firefox



Internet Explorer


Os dejo el código:

Código HTML:

<div id="my-glider">
  <div class="controls">
        <br>
        <ul style="text-align:center;">
            <li><a href="#section1">AM</a></li>
            <li><a href="#section2">A1</a></li>
            <li><a href="#section3">A2</a></li>
            <li><a href="#section4">A</a></li>
        </ul><!-- cierra ul -->
   </div><!-- cierra div -->
    
    <br>
    <div class="scroller">
        <div class="content">
            <div class="section" id="section1">
            <div class="caja_permiso_img">
                <div class="caja_permiso_img_in">
                    <img src="<?php imagenPermiso(1); ?>" width="160px" />
                 </div>
            </div>
            <div class="caja_permiso_contenido">
                <div class="caja_permiso_titulo">
                    <?php echo $am_t; ?>
                </div>
                <div class="contenido_separacion">
                    <?php echo $am; ?>
                </div>
            </div>
            </div>
            <div class="section" id="section2">
                <div class="caja_permiso_img">
                <div class="caja_permiso_img_in">
                    <img src="<?php imagenPermiso(2); ?>" width="160px" />
                 </div>
            </div>
            <div class="caja_permiso_contenido">
                <div class="caja_permiso_titulo">
                    <?php echo $a1_t; ?>
                </div>
                <div style="margin-left:10px;">
                    <?php echo $a1; ?>
                </div>
            </div>
            </div>
            <div class="section" id="section3">
                <div class="caja_permiso_img">
                <div class="caja_permiso_img_in">
                    <?php $img_permi = ""; ?>
                    <img src="<?php imagenPermiso(3); ?> " width="160px" />
                 </div>
            </div>
            <div class="caja_permiso_contenido">
                <div class="caja_permiso_titulo">
                    <?php echo $a2_t; ?>
                </div>
                <div style="margin-left:10px;">
                    <?php echo $a2; ?>
                </div>
            </div>
            </div>
            <div class="section" id="section4">
                <div class="caja_permiso_img">
                <div class="caja_permiso_img_in">
                    <?php $img_permi = ""; ?>
                    <img src="<?php imagenPermiso(4); ?>" width="160px" height="99px" />
                    <!-- <img src="contenido/imagenes/permiso_am_prueba.jpg" width="160px" height="99px" />-->
                 </div>
            </div>
            <div class="caja_permiso_contenido">
                <div class="caja_permiso_titulo">
                    <?php echo $a_t; ?>
                </div>
                <div style="margin-left:10px;">
                    <?php echo $a; ?>
                </div>
            </div>              
            </div>
        </div>
    </div>          
</div>
 

CSS

Código CSS:

.permisos{
    width:710px; 
    height:442px; 
}
 
    .caja_permiso_img{
        width:190px;
        float:left;
    }
    
    .caja_permiso_img_in{
        width:170px; 
        border-right:1px dashed #CCCCCC; 
        height:220px;
        float:left;
    }
    
    .caja_permiso_contenido{
        width:490px;
        float:right;
    }
    
    .contenido_separacion{
        margin-left:10px;
    }
    
    .caja_permiso_titulo{
        background-color:#e7e7df; 
        margin-bottom:20px; 
        width:100%; 
        font-size:26px; 
        font-weight:bold; 
        padding:10px; 
        color:#8C8C8C; 
        font-family:Arial, Helvetica, sans-serif; 
        size:25px; 
        text-transform:uppercase;
    }
 

A ver que puede ser.... porque ya no se ! me quedé así xDDD

Saludos y gracias !

[TuWebBook]

probaste a modificar las anchuras de los div o de la imagen que tiene AM??

[Jask]

He probado de todo .. :( y nada. .. y eso que me has comentado lo hice lo primero

[kseso?]

Sería más efectivo si pudiese poner un enlace al problema, pues al ejecutar los códigos que publicó (a parte de que es el programado y no el generado), obtengo un resultado diferente al que muestra en las capturas.

Atentamente

[ArturoGallegos]

Como ya dijo el compañero kseso?, sería conveniente ver el sitio, o como alternativa muéstranos el código que se genera después cuando lo visualizas en el explorador

y si nos haces favor de incluir el css de estas clases scroller, content, section

[Jask]

Perdonar, no la pude subir hasta ahora, falta de tiempo. Aquí os dejo la web:

http://pruebas.zemula.net/autoescuel...misoa#section1

[kseso?]

Reduzca la anchura de .caja_permiso_img a unos 160px (más o menos) y a .caja_permiso_contenido cámbiele el float a right. No se si eso tendrá algún efecto en otras secciones de web. En caso de ser necesario, pude añadir a esta última un margen derecho con valor negativo.

Pero posíblemente fuese conveniente una limpieza o cura de divitis (opinión muy subjetiva al no haber verificado a fondo los porqués de tanta caja).

Por ejemplo, .caja_permiso_titulo podría se sustituida por un hnº para alojar el título y .contenido_separacion podría ser innecesario al aplicando propiedades a los p y lo mismo para las dos cajas que utiliza para alojar la imagen de la izquierda.

Atentamente

P.D.: Échele un vistazo al validador, marca entre otras cosas un div sin abrir y no le reconoce la apertura del <head>, lo mismo para el css