Problema CSS, JQuery Cycle e IE

Question

Sto usando un plugin jQuery chiamato "Ciclo" e sto avendo problemi con il CSS per questo in IE, sembra perfetto in Opera, FF, Chrome e Safari, ma IE sta scoppiando DAU ..

www [dot] photographicpassions [dot] com/home

vedrete il "ultimo lavoro" sul lato destro della strada e le miniature qui sotto l'immagine principale, in FF, Safari, Chrome e Opera, il contenitore grigio è dietro tutte le anteprime, ma in IE, lo sfondo grigio si ferma nella parte superiore delle anteprime .. Ho provato varie cose per farlo funzionare, inutilmente .. qualcuno potrebbe aiutarmi per favore? ?

Ecco il CSS per i contenitori che non stanno giocando bella in 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; 
    } 

Se qualcuno mi potrebbe aiutare, che sarebbe stato fantastico !! :)

Answer 1

Basta usare overflow: hidden sui vostri contenitori. Per impostazione predefinita, overflow: auto non crescerà gli elementi per contenere il suo contenuto. Impostazione overflow: hidden (o overflow: auto ... bit con cui si rischiano barre di scorrimento indesiderate), si costringerà i div del contenitore ad espandersi al massimo di tutti i loro elementi figlio ... elementi fluttuanti inclusi.

Answer 2

Il div #latestHolder è flottato a sinistra, il che lo causa a be removed from the flow of the page. Prova a utilizzare la posizione relativa/assoluta invece di float:left; o deseleziona il float prima di terminare il div #mainContainer.

Clearing comporterebbe gettare in un elemento a livello di blocco al termine dei #maincontainer div in questo modo:

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