Updating my CSS for IE7
I’ve finally gotten around to testing websites at both The State News and at Artemis Solutions to check for IE7 compatibility. Some of the sites had new errors due to the changes in IE7’s rendering engine. One noticeable change was IE7 now correctly supported the !important tag which I had been using in my CSS to solve cross-browser inconsistencies. I would need a new method for giving style to only IE7…
The :lang Hack
Apparently there is still at least one CSS hack around that you can use to specify between IE and Firefox. But I’m done with hacks. It’s too easy for the browser makers to just release an update that breaks every one of your sites.
A coworker pointed this one out to me. This is Microsoft’s solution to the problem. It allows you to include a separate stylesheet for only IE. The beauty is it hides the include inside a comment meaning your page will still validate.
Here’s a quick example:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style-ie.css" />
That will allow you to create a style sheet for every browser (style.css) and then overwrite any of those styles for just Internet Explorer (style-ie.css). A decent solution but I’m just too stuck in my ways. I don’t like the idea having a separate stylesheet just for IE.
Conditional Body Class
I then came up with this solution which is kind of a combination of the two ideas. The lang hack is nice because it allows you to keep all of your CSS in a single file. The conditional comments are nice because they aren’t actually a hack and will most likely be included in all future releases of Internet Explorer.
Here’s the code:
/* IE ONLY STYLE */
The idea here is pretty simple. Put the conditional comments around the body tag and give the body a class. Then within your stylesheet, you can define styles for just your "ie" body.
There is one downfall to this method. Internet Explorer is going to get two body tags (the one within the conditional comment and the one after that). However, a quick check of IE’s DOM, and you’ll see that it just ignores any body tags after the first one.
Joe Sak pointed out that you can put conditional comments around the regular body tag telling IE to ignore it. You then just comment out the IF and ENDIF separately, which allows it to validate and non-IE browsers will know to read the body tag. I’ve updated the code above to reflect this method.
So there you have it. A clean, simple solution to cross-browser CSS.