IE7 Just Won’t Die

A very long time ago, as a CSS enthusiast, I wrote an article called ‘IE6 Just Won’t Die’ and it was significantly more angry than this one. As a CSS developer, IE6 just made me a little crazy. IE7 was a step up, but there are some common pitfalls for the modern CSS programmer who still needs to support IE7. Here are the top ones I have seen in the last month.

1. Negative Margins

   For the love of all that is good and right, stop using negative margins. Yes they are very handy when positioning has to be just right, but they should make you feel a little queasy. There is always another way, and you should take it! They create confusing code, and IE7 will ignore negative margins on any element that is contained by another elmement which hasLayout. This is very hard to avoid, as it is triggered by specifying absolute position, floats, and dimensions, among other triggers.

2. Pseudo-Classes :hover, :active, :before :after :last-child, :nth-child

   :hover and :active only work when applied to anchor tags, and the others are simply not supported at all. There’s really no good way to simulate them without JavaScript. If you expect your site to rely heavily on pseudoclasses, I recommend a JavaScript solution like Selectivizr or the PIE shiv. Both have their limitations, and I’m finding more and more that in order to be an expert CSS developer I also have to be an expert JavaScript developer.

3. Pseudo-Classes :checked and :disabled

   In addition to the suggestions above regarding JavaScript solutions, you can also try attribute selectors for these two. This is the item that I will get most upset about, and it’s not actually due to it’s problems with IE7. These pseudoclasses are also not supported in IE8 (same with last-child and nth-child) and yet I see them cropping up in amateurs’ code frequently. There are always exceptions where it might be ok, but I keep seeing them on e-commerce sites and that just disturbs me. Are you just not checking that you can make a sale in IE8? Really? IE8 is the browser that shipped with Windows XP SP2, which is still one of the most popular OS’s today. Many people work in locked-down environments and cannot upgrade to IE9/10. If the site’s purpose is to sell anything, then you need to support IE8, and it should not even occur to you to use these pseudoclasses.

4. Zoom Hacks

   There are suggestions all over the web to use “zoom:1;” as a way to trigger hasLayout when you need the element to be in a state of hasLayout. They may come along with all sorts of extra syntax to make it specific to certain versions of IE or other such conditionals, but overall it’s best to avoid. The zoom property is non-standard (the CSS3 standard allows for its use only within an @viewport rule) and causes weird behavior between browsers. The real killer, though, is that a lot of JavaScript plugins (including jQueryUI) use the zoom hack to properly position widgets, and you do not want your CSS to be fighting with your scripts. If you absolutely must use an arbitrary rule to trigger hasLayout, try width:100% or the min-height property (as suggested here). And if you can, comment the reason!

I’ve also got some issues with JavaScript developers who can’t seem to get IE7 under control, but mostly they just need more experience with a good framework like jQuery or Prototype. As a freelancer I thank anyone who takes this to heart. Half of my work is cleaning up your mess ;)