2013-06-13 6 views
0

J'ai le code HTML/css simple suivant sur ce site www.habitacionalkids.com.ar sur le chrome il n'y a pas de problème mais quand je l'ouvre sur FF ou IE j'ai un divs manquant. J'utilise un code très similaire sur d'autres sites et fonctionne très bien MAIS je ne sais pas pourquoi ne travaille pas ici.CSS fonctionne sur Chrome mais pas sur FF ni IE

CSS

html, body, #wrapper, images { 
    height:100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    background-color:#143d36; 
} 

img { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    display: block; 
    /*display: inline-block;*/ 
} 

.center { 
    width: 800px; 
    height: 600px; 
    position: absolute; 
    left: 50%; 
    margin-left: -400px; 
} 
.center_mini{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 

} 
.center_mini_float{ 
    float:left; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 

} 

HTML

<div class="center"> 
    <div class="center_mini"> 
     <img src="images/img_01.png" width="800" height="470" alt="bg"> 
    </div> 
    <div class="center_mini"> 
     <div class="center_mini_float"> 
     <img src="images/img_02.png" width="364" height="130" alt="bg"> 
     </div> 
     <div class="center_mini_float"> 
     <div class="center_mini"> 
      <div class="center_mini_float"> 
      <a href="https://www.facebook.com/HabitacionalKids?fref=ts" target="_blank"><img src="images/img_03.png" width="35" height="33" alt="bg"></a> 
      </div> 
      <div class="center_mini_float"> 
      <a href="mailto:[email protected]"><img src="images/img_04.png" width="34" height="33" alt="bg"></a> 
      </div> 
     </div> 
     <div class="center_mini"> 
      <img src="images/img_06.png" width="69" height="97" alt="bg"> 
     </div>    
     </div> 
     <div class="center_mini_float"> 
      <img src="images/img_05.png" width="367" height="130" alt="bg"> 
     </div> 
    </div> 
</div> 

Répondre

3

Il semble que le div manquant est flottant juste à droite de ses frères et soeurs plutôt qu'en dessous. Essayez d'ajouter ceci:

.center_mini { 
    clear: both; 
} 
2

Utilisé pour Overflow:hidden; comme comme celui-ci

.center_mini{overflow:hidden;} 

et deuxième option est ce

.center_mini:after { 
    clear: both; 
    content: ""; 
    display: table; 
    overflow: hidden; 
} 
0

Cela fera l'affaire pour vous. Ajoutez cette ligne de code à votre css.

.center_mini img{ 
     float:left; 
} 
Questions connexes