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.
2 comments:
Why not just use "clear: both;" ?
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.
http://www.mezzoblue.com/archives/2005/03/03/clearance/
Post a Comment