Tuesday, March 17, 2009

Clearing floats in IE7 for Vista

I've used this method for clearing floats in my layouts.

It worked in all browsers I tested on. Then customers (using IE7/Vista) started reporting strange layout bugs that I (using IE7/XP) wasn't able to reproduce. It turns out IE7 for Windows Vista renders slightly different than IE7 for Windows XP.

I believe the main difference is when hasLayout is triggered on the styled elements.

To make the clearing of the floats work in IE7 for vista, i added this property:
height: auto

Example of fix:
/* Clear floats in the #content-element */
#content { overflow: auto; }
/* Fix for IE7/Vista hasLayout bug (resets the hasLayout property) */
*:first-child+html #content { height: auto; }

This resets the hasLayout property on the element.

The fix style rule is read/used by IE7/XP also, but it shouldn't have any negative side-effects.


Unknown said...

Why not just use "clear: both;" ?

Tommy Valand said...

The example link of methods of clearing floats was probably not the best. I replaced it with a link to Dave Shea/Mezzoblue.

Read that to understand why the overflow:auto(or hidden)-solution is so ingenious for clearing floats in layouts.