CSS, JQuery Cycle y IE issue

Question

Estoy usando un complemento jQuery llamado "Cycle" y estoy teniendo problemas con el CSS en IE, se ve perfecto en Opera, FF, Chrome y Safari, pero IE está agrietando la SADS ..

www [punto] photographicpassions [punto] com/home

verá el "último trabajo" en el lado derecho y las imágenes de abajo de la imagen principal, en FF, Safari, Chrome y Opera, el contenedor gris está detrás de todas las miniaturas, pero en IE, el fondo gris se detiene en la parte superior de las miniaturas ... He intentado varias cosas para que funcione, en vano ... ¿alguien podría ayudarme? ?

Aquí está el CSS para los recipientes que no están jugando agradable en el IE:

/* latest work container */ 
div#latestHolder { 
    position: relative; 
    float: left; width: 368px; 
    margin: 0px 0px 0px 0px; 
    padding: 10px 10px 10px 10px; 
    background-color: #666666; 
} 

/* thumbnails */ 
div#nav { 
    position: relative; 
    float: left; left: 0px; 
    width: 376px; 
    padding: 0px 0px 0px 0px; 
    margin: 1px 0px 0px 0px; 
} 
    div#nav li { 
     width: 66px; 
     float: left; 
     padding: 0px 0px 0px 0px; 
     margin: 9px 9px 0px 0px; 
     list-style: none; 
     cursor: pointer; 
    } 
    div#nav a { 
     padding: 3px; 
     display: block; 
     background: #404040; 
     cursor: pointer; 
    } 
     div#nav a.activeSlide { 
      background: #ffffff; 
      cursor: pointer; 
     } 
     div#nav a:focus { 
      outline: none; 
      cursor: pointer; 
     } 
    div#nav img { 
     width: 60px; 
     border: none; 
     display: block; 
     cursor: pointer; 
    } 

Si alguien me podría ayudar, eso sería fantástico !! :)

Answer 1

sólo tiene que utilizar overflow: hidden en sus contenedores. Por defecto, overflow: auto no hará crecer elementos para contener sus contenidos. Desbordamiento de configuración: oculto (o desbordamiento: auto ... bit con el que arriesga barras de desplazamiento no deseadas), obligará a sus divisiones de contenedor a expandirse a la altura de todos sus elementos secundarios ... elementos flotantes incluidos.

Answer 2

El div #latestHolder se flota a la izquierda, lo que hace que be removed from the flow of the page. Intente utilizar la posición relativa/absoluta en lugar de float:left; o borrar el flotador antes de finalizar el div #mainContainer.

Compensación implicaría lanzar en un elemento en bloque al final de los #maincontainer div, así:

<div style="clear: both;"></div>