Fix IE6 Double Margin bug

Author: Alessandro Coscia

The problem

IE6 is famous for its 'ie6 double margin bug'.
It occurs when you use float boxes. In certain cases the margin will redouble.

You can find more info about this bug to Position is Everything.

Solutions

There are several solutions:

• Hack one-half margin value for IE/win only
• Set display: inline
• Use jquery.fixDoubleMargin.js (compatible with prototype, mootools and scriptaculous!!!)
  

Solution: Use jquery.fixDoubleMargin.js

I wrote this plugin to solve this problem.
It is very simple to use: include the libraries between head tag
My Code:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fixDoubleMargin.js" type="text/javascript"></script>
<script src="js/jqbrowser-uncompressed.js" type="text/javascript"></script>

using it:

<script>
var $j = jQuery.noConflict();
$j('document').ready(function () {
$j('div').fixDoubleMargin();
});
</script>

other method:
CSS fix for the double margin float bug in IE6
Using display:inline is cross-browser friendly. Floated elements are treated as block-level by all browsers and specifying something like:
div
{
display:inline; /* cancel IE double margin bug */
float:left;
margin-left:20px;
}
…should work fine in all browsers.