Reach Customers Online

How to Target CSS Styles to Internet Explorer 6 and IE7

This article has been updated on January 30, 2009. Please see the bottom of this article for the gory details.

Today, for the umpteenth time in the past month, I found myself coding a design to work around bugs in the Internet 6 and 7 web browsers. I had found and posted a link to a great site on our Resources pages, on the HTML and CSS page, and realized that it should be posted on the blog as well.

Basically, to target a style so that only Internet Explorer 6 and 7 web browsers will respond, add an asterisk before the definition like this:

If you want to target a style so that only Internet Explorer 6 will respond, add an underline before the definition, like this:

This tip is from Last Child, an excellent resource on CSS. This tip is really cool because it is lightweight and standards-compliant browsers like Firefox and Safari will ignore the hacks.

The real problem with CSS hacks, besides the fact the Microsoft browsers are so poorly coded in some ways, is future maintenance of your CSS code. At the least, you should put a comment next to any CSS element that is targeted solely to an IE browser. That way you can quickly find these hacks in the future and make changes on the day, one hopes, Microsoft releases a truly web standards compliant browser. One that requires no hacks. At worst, do not go for complicated hacks whenever possible. They’re more difficult to maintain going forward.

UPDATE (Jan 30, 2009): Please ignore what I describe above because it is non-optimal for solving this particular problem (how to make IE browsers conform to standards). Instead, the best approach to code around bugs in Microsoft browsers is to use conditional comments, as described in this absolutely brilliant SitePoint article, Internet Explorer Conditional Comments, and used on sites like this one if you select View > Source and study the page code. Also, if useful, here is the official Microsoft page about conditional comments.

Unlike the approach above, where you put into one CSS file all your styles for all browsers, conditional comments let you create separate stylesheets for separate browsers. Therefore, when IE6 goes away, for example, you simply remove the conditional comment that delivers your IE6-specific stylesheet. You don’t have to touch any styles in any other stylesheet, or hunt down every last style you tweaked for IE6 browsers. Plus your CSS code will be pristine with no hacks.

So I apologize I steered people wrong up to this point. Hopefully the links to conditional comments will more than make up for the error. And please let me know if you find a better way to solve this problem (if you’re a gazillionaire, perhaps you could buy Microsoft and cancel all their web browser software development).

URLs:

http://reference.sitepoint.com/css/conditionalcomments

http://msdn.microsoft.com/en-us/library/ms537512.aspx

http://www.last-child.com/ie7-hacks/

http://www.redwrangler.com/resources/html-and-css.php#iebugs

Related Stories

How to Deal with Internet Explorer 6 (IE 6)

View Your Web Pages in Multiple Versions of Internet Explorer Browsers

Fixing Your Website Designs For Internet Explorer 7

Internet Explorer 8 Beta Released for Testing

Martian Headsets: Internet Explorer 8 and the Problem of Web Standards

Browser Campaign Slams Microsoft Internet Explorer Web Browser

For Tabbed Browsing And Other New Tricks, Try Explorer Rivals

IE Web Browser Flaw May Boost Rival Browsers