Autarchy of the Private Cave

Tiny bits of bioinformatics, [web-]programming etc

    IE (Internet Explorer) margin doubling bug fixes

    27th September 2006

    In Internet Explorer for Windows (tested with version 6 SP2), if you write CSS code similar to this:

    1. #floatbox
    2. {
    3.   float: left;
    4.   width: 150px;
    5.   height: 150px;
    6.   margin-left: 100px;
    7. }

    and put your “floatbox” inside a container (such as DIV), you will actually see 200px of the left margin instead of the expected 100px. This problem is known as “IE margin-doubling bug”.

    In this post I collected solutions you can use to avoid this problem. The solution I’d recommend is at the end.

    The first solution is to apply some minimal height to the container:

    1. * html .visualIEFloatFix { height: 0.01%; }

    This method is described in more details here , and even better here.

    Another one is to apply position:relative, this is quite an old solution, described here (there are also other fixes for the problem there, too; link returned error at the time of writing, might be a temporal problem – if not, please remind me to remove it).

    Another solution is to wrap the element in another one, and apply float to that another. Removing float from the element helps avoid the trouble. This fix found here. There are lots of examples there, too.

    You can also set display:inline, as described in this solution. I would recommend using this one as the most clean and compatible. To apply it to our example at the beginning, we should write the following CSS code:

    1. .floatbox
    2. {
    3.   float: left;
    4.   width: 150px;
    5.   height: 150px;
    6.   margin-left: 100px;
    7.   display: inline;
    8. }
    Share

    2 Responses to “IE (Internet Explorer) margin doubling bug fixes”

    1. mariya Says:

      display: inline; solution doesn’t work with 6ie

    2. Bogdan Says:

      Mariya,

      it should work, if you really mean IE6 (there was no IE7 at the time this solution was suggested).

      Check your code, you might have something else influencing the display.

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>