2013-06-13 1 views
0

У меня есть следующий код HTML/css на этом сайте www.habitacionalkids.com.ar на chrome нет проблем, но когда я его открываю на FF или IE, у меня есть один divs отсутствует. Я использую очень похожий код на других сайтах и ​​отлично работаю, но я не знаю, почему здесь не работает.CSS работает на Chrome, но не на FF, ни на 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> 

ответ

3

Оказывается, что отсутствует ДИВ просто плавающая справа от его родного брата, а не под ним. Попробуйте добавить это:

.center_mini { 
    clear: both; 
} 
2

Используется для Overflow:hidden;, как как этот

.center_mini{overflow:hidden;} 

и Второй вариант это

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

Это будет делать трюк для вас. Добавьте эту строку кода в свой css.

.center_mini img{ 
     float:left; 
}