jQuery: Fix IE6 Double Margin bug

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> and </head>:

          <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>

and then put this code after:

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

Downloads

jquery.fixDoubleMargin.js (4.12Kb) or jquery.fixDoubleMargin.min.js (2.18Kb)
jquery.js
jqbrowser.js (uncompressed recomended)
See test file (demo)

jQuery

jQuery
Fix IE6 Double Margin bug
Fix Box model bug
Usefull plugin to solve some CSS problems.