ReachCustomersOnline.com

All Headlines > How to Target CSS Style to Internet Explorer 6 and IE7

How to Target CSS Style to Internet Explorer 6 and IE7

Posted by TimSlavin at April 14, 2008

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.