Modulor. Custom Software Solutions.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on January 10, 2011
Category: CSS
After many months of inactivity, we have decided to update our project portfolio and bring to life this research blog. As mentioned on post one, we will try to keep it updated with things our development team finds that readers will be interested in.

Even though IE6 is being less used by people online, we still encounter companies which need their projects to be compatible with older versions of IE.

In this post we will discuss a common IE CSS problem called "float rendering."

IE6 has a bug that manifests while handling margins of floated elements which causes in-line elements adjacent to a floated div to appear to be indented from their expected location.

We will not try to reproduce the bug, for that you can browse over to http://www.positioniseverything.net/explorer/floatIndent.html and look at a very good example of when this happens.

To make things simple, the only thing you need to do in order to fix this bug is to add to your floated element's CSS code the following:

display: inline;

As "Big John" in the link shared above says: "The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations..."

Sometimes you need to break the "rules"...
NocheVolta commented:
Posted Mar 3, 2011 05:30 AM
El hermoso IE6, para esos dolores de cabeza http