El flotador no funciona en Internet Explorer 8

Question

En mi sitio Family Law Act Estoy tratando de obtener dos hileras horizontales de imágenes/perfiles apiladas una encima de la otra. la fila superior es para una ciudad, la fila inferior de perfiles es para otra ciudad. La fila superior está flotando correctamente, pero la fila inferior, como puede ver, no está flotando. Más bien, las fotografías están apiladas verticalmente una sobre otra.

Funciona bien en Chrome y Firefox, pero en Internet Explorer 8 existe este problema.

¿Alguna 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

flotadores generalmente funciona mejor cuando el div que contiene tiene un ancho

en su Nueva York div tratar dándole un ancho (el ancho de su área de contenido, cualquiera que sea)

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

Yo agregaría esto a su div de Vancouver también.

Answer 2

intente reemplazar esto:

<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'> 

Esto me resolvió un problema similar en un sitio de WordPress. Quizás agregue un <div style="clear:both"></div> entre las columnas. Siguiente paso: intente eliminar errores con, por ejemplo, barra de herramientas de desarrollador addin, le daría más información acerca de dónde viene el problema.

Answer 3

Parece que según su diseño no necesita las llamadas float en los contenedores (#Vancouver y #New_York), solo en el contenido. Si eso es así, borrar esas carrozas resuelve tu problema.

También puede eliminar el clear en el #New_York.