Targeting IE6 and IE7 in CSS

Targeting IE6 and IE7 in CSS, as many of you know, becomes an extremely useful yet hack type of way of coding when you have to support these old browsers.  Some CSS hacks have made it a lot easier to handle the little quirks and override the main CSS to target a specific version.  There are two characters, one for IE6 and one for IE7.  Here is how it looks.

#divName
{
     padding: 5px;  /* shows in all browsers */
     *padding: 5px; /* shows in IE7 and earlier */
      _padding: 5px; /* shows in IE6 and earlier */
}

Really simple; by adding the preceding characters, it can change your CSS world.  I try at all costs to avoid doing such things because I don’t like how it clutters up my CSS page.  However, sometimes it’s just the easiest/quickest way to get the desired result you need when you have a deadline to meet.

There is another way to try and force CSS that is not working at that is by using a modifier called !important. However, this can make code messy and hard to maintain and I recommend avoiding at all costs.

Here is an example:

p {
    color: blue !important;
}

This means, regardless of what color style you use on an paragraph tag in other CSS, it will be trumped and will show up blue. Use wisely my friends.


StackOverflow Profile