Compensating for double margins in Internet Explorer

by Alex Limi — last modified Dec 30, 2008 03:01 PM

Internet Explorer sometimes inserts double margins in layouts when you float items. Here's how to work around it.

Here's an example of how it can look:

Internet Explorer float bug

The extra spacing (marked by the red rectangle) appears in Internet Explorer when you float an image to the right (blue rectangle) inside the content area.

The workaround is to set the height to an impossible 1%, as explained in the invisible text bug in Internet Explorer article.

In Plone 2.1, we introduced a helper class that lets you do this. It's located in ploneIEFixes.css, and looks like this:

  /* Fix for IE float bug */
  * html .visualIEFloatFix {
    height: 0.1%;
  }

(If you run an earlier version of Plone, just cut and paste the above into your CSS file.)

So, in this case, the solution is to wrap the area directly beneath the headline Available downloads (text + image) in a div with this class:

  <div class="visualIEFloatFix">

The extra spacing on the left side will now disappear, and the page will look identical to the way it does in other browsers.

Thanks to Michael Zeltner in providing assistance on how to solve this problem.

-- Alexander Limi