IE7 Devs promised a lot, and indeed they did fix some of the most glaring errors in Web Standards Compliance in IE7. I will be forever grateful for IE7 now paying attention to min width/height and max width/height, even though I still have to hack for IE6 for those attributes. But after a few months of designing websites and testing using both IE6 and IE7, I can tell you unequivocally that most things that are broken in IE6 are also broken in IE7, but need a new arsenal of fixes.

The biggest problem is that IE7 still has the haslayout thing going on. The way I understand it is that IE versions give dimension to the html element within an html document, something which no other browser does, and then adds a proprietary MS way to deal with that fact- “layout”. “hasLayout” happens when a layout trigger is introduced, however, some triggers that worked for IE6 don’t work for IE7, so there are some changes to be made on older pages to get them working well in both browsers. Ingo explains it on his page MUCH more thoroughly than I can, so please, if you have an interest, read his most excellent articles. Ingo is the Haslayout Expert BugBuster, for sure.

Some of the more bizarre IE behaviors are directly related to this haslayout thing. Things like text overlapping, links jumping around on mouseover, doubled padding or margins in unexpected places, etc. are all a direct result of haslayout, and since IE7 still renders pages using this proprietary formula we’re left to find new bugspray to kill the little beasts.

Since the most effective haslayout trigger that works for both IE6 and IE7, zoom: 1; doesn’t validate, the best approach, in my opinion, is to feed both versions of IE a specific IE only stylesheet through a conditional comment targeted at IE in general using “if IE” instead of “if lte IE 6″. Then, to target both IE6 and IE7 you simply put your hack in your IE stylesheet, and feed this haslayout trigger to whatever element is giving you the headache, which is, for me, more often than not, navigation lists where padding is doubled or things jump around when moused over, which requires the haslayout hack put on the ul a. For IE6 specific hacks you use the * html trick to feed things ONLY to IE6 within this IE specific stylesheet. If you need to feed one thing to IE6 and something else to IE7 you use the cascade. Place the IE7 hack first, then the * html version for IE6. IE7 will read the first version since it will ignore the second * html version, and IE6 will pick up the * html version since it’s last in the cascade.

I know some purists will argue that using conditional comments is hacky and awful, since conditional comments are a proprietary call and browser specific code, and these purists would rather use one stylesheet and more wacko IE specific filters, but in my estimation hacks are hacks no matter where they are, and I’d rather put the good and true css in the main stylesheet and the bugbusting version for IE in a separate and easily findable area. This will, hopefully, futureproof my sites in a better way, and allow me latitude if IE8 either gets it right or, as is sadly to be expected, introduces a new crop of bugs to the old, since it will allow me to correct the conditional comment call to “if lte IE 7″ and feed IE8 its own bugbuster stylesheet. It was not fun going back into some of the old sites and fixing for IE7, even though I was more or less prepared. Anything I can do to make a future IE8 transition easier will be a GOOD thing, especially since I’ll have that many more sites in my portfolio by then, and that many more clients to look out for.

There are some places where adding haslayout can break stuff so if you’re having a hard time fixing something and need some expert IE bugbusting assistance, my CSS heroes, Ingo, Holly Bergevin, Georg, Big John, Eric Meyer, et al, all belong to and actively participate in the CSS-Discuss Mailgroup. I highly recommend it for problem solving if your head hurts from pounding it on your desk after encountering the chitinous nature of IE in any of its infamous versions.

Technorati Tags: IE7, Conditional Comments, CSS Bugbusting, IE Bugs, Haslayout

This entry was posted on Sunday, June 24th, 2007 at 12:25 pm and is filed under Web Design, CSS Tricks and Hacks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.