With all the posts starting to pop up about IE7 being layout complete and waving the starting flag that it’s okay to start testing, I downloaded it from MSDN yesterday and took it for a spin. I found some good instructions for how to run IE7 on the same machine as IE6. I can’t run them at the same time since when IE7 is loaded, it uses a registry entry which causes IE6 to open URL’s in my default browser, which is Firefox. The instructions include a batch file for creating and cleaning this up when you run IE7.
I went to a handful of sites and assuming you have a standards-based site using CSS for presentation, I think the biggest problem most of you are going to face is with clearing floats. At least it will for me. I’ve made a lot of use of the easy clearing method and this won’t work in a lot of cases for IE7. Maybe if I wait long enough it will get updated so I can keep using it. I haven’t yet tried this update to that method yet.
My initial efforts
I just finished fixing up the first site I think I ever did without using tables. The Bailey Foundation site had some issues with a few floats in IE7. I added a few empty markup elements and a couple of “zoom:1;” attributes to the CSS in a few places to make IE7 happy. I then had to deal with some things that broke in IE6, which then broke things in Firefox. I seem to have gotten it all balanced out though. After that I checked things out in Safari and it seemed good, too.
On my own site, the main two issues I found where that the nav area wasn’t clearing the floated elements in the nav bar and I had the same problem on my portfolio page with the body. Adding a few
empty tags to the markup fixed both issues, but I consider it just a quick fix since I don’t like to add the extra markup.
What did I learn?
For sites I do from here on out and most likely with others I fix, I think the safest route will be to use IE’s conditional comments to load in browser specific css files like this:
-[if lt IE 7]> ->
At least we have something to test with now.