Float sinistra non funziona in Internet Explorer 8

Question

Nel mio sito Family Law Act Sto cercando di ottenere due righe orizzontali di immagini/profili impilati uno sopra l'altro. la riga superiore è per una città, la riga inferiore dei profili è per un'altra città. La riga in alto è flottata correttamente, ma la riga in basso, come puoi vedere, non è flottante. Piuttosto, le foto sono impilate verticalmente l'una sull'altra.

Funziona bene in Chrome e Firefox ma in Internet Explorer 8 c'è questo problema.

Qualche idea?

CSS

#Vancouver {float:left; display:block; } 
.vancouver {float: left; padding-right: 10px;} 
#New_York {clear:both; float:left; display:block; margin-top:20px; } 
.newyork {float: left; padding-right: 10px; } 

HTML

<div id="Vancouver"> 
<div class="headVan">Vancouver</div> 
<div class="vancouver a"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li> 
<li>Tom JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver b"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver c"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver d"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

<div class="vancouver e"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li> 
<li>Sam JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 

</div> 

<div id="New_York"> 
<div class"headvic">New York</div> 
<div class="newyork a"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li> 
<li>Nat JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 
<div class="newyork b"> 
<ul> 
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li> 
<li>Jed JErk</li> 
<li>firm: </li> 
<li>tel: </li> 
<li>profile </li> 
</ul> 
</div> 
</div> 

Answer 1

galleggianti in genere funzionano meglio quando il div contenitore ha una larghezza

nel New york div provare a dare una larghezza (la larghezza del area di contenuto, qualunque essa sia)

#New_York { 
    clear: both; 
    float: left; 
    display: block; 
    margin-top: 20 px; 
    width: XXXXX px; 
} 

Aggiungerei anche questo al tuo Vancouver Div.

Answer 2

provare a sostituire questo:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

con:

<meta http-equiv="X-UA-Compatible" content="IT=edge,chrome=IE8"> 

<meta charset='utf-8'> 

Questo mi ha risolto un problema simile in un sito WordPress. Forse aggiungi un <div style="clear:both"></div> tra le colonne. Passaggio successivo: provare a eseguire il debug con, ad esempio, la barra degli strumenti dello sviluppatore, per ottenere ulteriori informazioni sulla provenienza del problema.

Answer 3

Appare basato sul layout che non è necessario le chiamate float sui wrapper (#Vancouver e #New_York), solo sui contenuti. Se è così, l'eliminazione di questi float risolve il problema.

È inoltre possibile eliminare lo clear su #New_York.