We got an email sent to Content with Style from one of the IE7 development guys last week warning us that the site was broken in the forthcoming browser. From what I’d heard I was under the impression that the current Beta 2 was not yet ready for testing but apparently I got the wrong end of the stick. the bulk of the work is done and no more major changes are planned. I’d been dreading the moment I had to go through all my old sites and start checking them in IE7. I was really afraid that everything would be screwed…
Yesterday I downloaded the beta install from Microsoft and, following Jon Galloway’s instructions, got it hooked up to his marvelous launch script, slightly customised to keep conditional comments working in my other IE standalones. Everything worked perfectly.
I was pretty much horrified when I started looking through my sites though. My fears appeared to be justified - donotremove, Content with Style and Wordtracker, were all over the place. I read Malarkey’s summary of the clearfix issues a couple of weeks back but I hadn’t really been paying attention. All I could remember was that clearfix was somehow broken and hasLayout had something to do with it… Off I toddled to do some reading.
So, to force elements to contain their floats in IE7 you need to somehow set their hasLayout property to true. Not so bad. This can be done a few ways, with overflow: auto and zoom: 1 being the most straightforward.
I’ve used Easy Clearing on every site I’ve done in the last couple of years. All my structural blocks have the .clearfix class on them. The one I have closest to hand is donotremove so as a test run I changed its conditional comments to feed my ie-standards.css file to IE7 as well as IE6 and added:
.clearfix {
zoom: 1;
}
Guess what? The problems have all gone. The site looks exactly as I intended. It took me about 30 seconds…
