Update: These hacks are talked about further at this CSS hacks site, and why you should probably not use them.

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

  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…

  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.

  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;.

No comments

Leave a Reply