CSS works on Chrome but not on FF nor IE

Question

I have the following HTML/css simple code on this site www.habitacionalkids.com.ar on chrome there is no problem but when I open it on FF or IE I have one divs missing. I'm using very similar code on other sites and works fine BUT I don't know why is not working here.

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:hola@habitacionalkids.com.ar"><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>

score 3 · Accepted Answer · answered Jun 13 '13 at 03:50

3

It appears that the missing div is just floating to the right of its sibling rather than below it. Try adding this:

.center_mini {
    clear: both;
}

answered Jun 13 '13 at 03:50

grc

22,885
5
42
63

score 2 · Answer 2 · answered Jun 13 '13 at 04:10

2

Used to Overflow:hidden; as like this

.center_mini{overflow:hidden;}

and Second option is this

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

answered Jun 13 '13 at 04:10

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 3 · answered Jun 13 '13 at 04:38

0

This will do the trick for you. Add this line of code to your css.

.center_mini img{
        float:left;
}

answered Jun 13 '13 at 04:38

Akshay

1,344
11
17

CSS works on Chrome but not on FF nor IE

3 Answers3