CSS hack for IE6 and IE7

Everyone know what a underscore hack is, but it fails in IE. Before getting into the Underscore hack, we need to know how it works,

If a property say height is prefixed with _ or - IE6 will assume that as a valid property but FF will ignore it, so for any IE6 specific style we can use _ or -. But in IE7 that bug was fixed, so if any property is followed by _ or -, IE7 will ignore it similar to Firefox.

Dont lose, still IE is not that robust, if you place a ‘*’ before the property, it considers, now that is something to smile about and thinking deeper. So if a property is prefixed by a *, it will be considered as a valid property, but we can a small problem here, even IE6 will take this as a valid one. So summing up everything we have

	*	_ or -
Firefox	Invalid	Invalid
IE6	Valid	Valid
IE7	Valid	Invalid

Analyzing the above table, if we want something specific to IE 7, then it should be prefixed with * and considering the fact that IE6 will also understand that, we must override that for IE6. We can override that with _ or - property. So here is the solution,

1. Define a property for Firefox - normal manner
2. Define the same property for IE7 with * Prefix
3. Define the complementary property (margin left and margin right) for IE6

Deciding the complementary property needs some amount of logical input. So for example, for a margin issue, this is what we gona have.

• For Firefox, margin-right: 10px;
• For IE6, _margin-left: 8px;
• For IE7, *margin-right: 2px;

That is all we need to do. Now we will see the same in all the brwosers, this is pretty ugly hack, but we dont have a better solution