CSS tricks – double margin bug on IE6

Posted on 17. May, 2009 by Guillermo in Development

We all know how it goes, you make a beautiful design, touch the CSS a little bit and after some work you get the looks you wanted for your site. Then, you remember something that makes the hairs on the back of your neck stand up… to test the site on IE6.

All jokes aside, IE6 can be a little tricky with the CSS, here’s one of those things and how to fix it.

The problem

This bug appears when you have a floated element, and a margin value in the same direction. IE6 renders a double sized margin:


.double-margin{
    width: 200px;
    float: left;
    margin-left:25px;
}

The solution

To fix this problem, we just have to change the display of the floated element to “inline” and voila, problem solved!


.no-double-margin{
    width: 200px;
    float: left;
    margin-left:25px;
    display:inline;
}

CSS tricks – double margin bug on IE6