Black Belt Coder

IE6 only CSS syntax hack

Posted in development by Kris Gray on the July 2nd, 2008

I've talked about how you can use the asterisk to indicate a rule is for IE only but while doing some investigation for another issue I discovered another easy hack that could eliminate the need for things like conditional comments at all.

I was doing some investigation on transparent PNGs and had the following code

PLAIN TEXT
CSS:
  1. .bg {
  2. float: left;
  3. margin: 100px;
  4. width: 700px;
  5. height: 400px;
  6. border: 2px solid teal;
  7. background: url(alpha2.png) no-repeat;
  8. }

Live Example

This works in every browser but IE6 since it doesn't support PNG alpha channels without using the DirectX Filter property. So I'll need to turn off the background, and specify a filter property, preferably only applying to IE6. The code I ended up with was...

PLAIN TEXT
CSS:
  1. .bg {
  2. float: left;
  3. margin: 100px;
  4. width: 700px;
  5. height: 400px;
  6. border: 2px solid teal;
  7. background: url(alpha2.png) no-repeat;
  8. *-background: none;
  9. *-border: 10px solid black;
  10. *-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="alpha2.png",sizingMethod="crop");
  11. }

Live Example

The obvious extra syntax above is *- which is the hack to bypass the all the other browsers but IE 6. I'm jus ta lowely web developer not an IE/FF CSS parser expert so I'm not exactly sure why IE6 recognizes this and IE7.

Also, the asterisk isn't even necessary for this to work.

PLAIN TEXT
CSS:
  1. -background: none;

This works just as well, but I thought it prudent to add the asterisk to adhere to the hack used by the Yahoo guys, and prevent any conflicts with the browser specific properties popping up such as -moz-border-radius: 10px;.

Leave a Reply