Two Helpful IE Hacks

For a change of pace, below is a short article about CSS.

* (star) or Holly Hack

In most browsers the CSS root tag is html, so you might write:

html body {
	font-size: 12px;

In, IE (version 6 and lower) Holly (Bergevin, i think), found that the DOM actually starts with *, so you might write:

* html body {
	font-size: 12px;

Because only IE 6 and lower understands the *, all other browsers (including IE 7) ignore style declarations beginning with star. Because of this, many designers use this hack to apply styles needed only for IE6. Most commonly this is as a result of IE Box Model issue, however, if you build your DOM carefully and dont apply heights or widths to elements with margins or paddings then you wont have Box Model issues.

PNG Transparency

Lately, I have been using the holly hack, because IE 6 does not support PNG transparency. If you find yourself forced to use transparent PNGs, then you can use the holly hack to target the element and apply this Microsoft only filter:

* html a.png {
	background: #FFF;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=relative/path/to/my/png, sizingMethod=scale);

The filter is a Microsoft only transformation that applies the alpha or index transparency filter for the image. I found with strict doctypes that the filter only works if you explicitly declare a background color, otherwise if you inherit a color, it seems to ignore the filter.