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 don’t apply heights or widths to elements with margins or paddings then you won’t 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.
Using the AlphaImageLoader filter in CSS for IE6 PNG transparency works well enough in many circumstances, but it can fail in certain cases. For example, it can cause trouble when a transparent PNG is used as the background for an element that contains links.
I’ve found iepngfix.htc to offer a more consistent and trouble-free solution:
http://www.twinhelix.com/css/iepngfix/
It uses the same filter, but in the context of an IE-only script that contains some fallback measures for troublesome special cases. Don’t let the 15KB download size alarm you — it’s mostly demo files. The script itself is only about 2.5KB.
Comment by Adam Messinger — September 16, 2007 @ 8:27 pm
Thanks Adam. Yeah, I have used the iepngfix.htc before as well. Generally it’s as easy as including that file in the same folder as your CSS. I had trouble getting Tomcat to read the .htc file so I have not used it recently. However, on any LAMP server, I have never had a problem.
Comment by admin — September 19, 2007 @ 9:07 am
Better to use conditional comments than hacks targeting a less compliant browser (aka IE6). It organizes your CSS and you can target specific versions as well.
http://www.quirksmode.org/css/condcom.html
Also who supports IE5 anyway? I only do FF, IE6/7.
Comment by joey — September 24, 2007 @ 12:23 pm
Joey,
Conditional comments are very useful. However, practice has taught me that it is much easier to maintain 1 IE stylesheet than 2 or more. I generally use
<!––[if lt IE 8]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css” />
<![endif]––>
and then use the star hack to differentiate between IE 7 and 6. I don’t support IE 5.5 or less, unless a client demands it. Some large corporations still use very outdated intranets.
Comment by admin — September 24, 2007 @ 12:48 pm