TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

How to achieve alpha transparency in IE6 without the need of an HTTP request

Unlike other solutions (see further reading), this technique does not require a link to an external file, be it an htc component or a "shim" (clear.gif).

Check the demo page.

To "fix" img elements

The rule below is read by IE 5 and 6, but the use of the escape character ("\") sandboxes the dynamic property for IE 6.
This CSS expression checks if the image is a PNG file, and if it is, it applies the filter and does the padding/height/overflow trick explained in my PNG overlay article.

Note that for this technique to work, you need to make sure that at least the width of the image is set, either via the markup or CSS.

* html img {
  behavior: expres\sion(
  (this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
  this.runtimeStyle.paddingTop = this.height,
  this.runtimeStyle.height = 0
  )
  );
  overflow:hidden;
}

To "fix" background images

The following rule checks every single element in the document for PNG background images.

* html * {
  behavior: expres\sion(
  (this.runtimeStyle.behavior = "none") && (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) && (
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')",
  this.runtimeStyle.zoom = 1,
  this.runtimeStyle.backgroundImage = "none"
  )
  );
}

Unless you cannot edit the markup, my advice is to apply a class (i.e. "png") to the elements you want to be styled with the filter and go with that class instead, for example:
* html .png
If you really cannot edit the markup, then at least try to replace the universal selector (*) with an HTML element, for example:
* html div, * html p, etc. as this will reduce the number of elements to be parsed.

Take note Do not use the underscore property hack (_property) to hide this rule from IE 7. This would fail as Internet Explorer evaluates the expression regardless of the property string. Actually, to verify this and ensure that the dynamic property does not do "evil" things behind your back you can try these two rules (will work in IE 7):

  • html img {
      behavior: expres\sion(
      (this.runtimeStyle.behavior="none") && (alert("Bingo!")) && (this.src.toLowerCase().indexOf('.png')>-1) && (
      this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
      this.runtimeStyle.paddingTop = this.height,
      this.runtimeStyle.height = 0
      )
      );
      overflow:hidden;
    }
  • html img {
      foo: expres\sion(
      (this.runtimeStyle.behavior="none") && (alert("Bingo!")) && (this.src.toLowerCase().indexOf('.png')>-1) && (
      this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
      this.runtimeStyle.paddingTop = this.height,
      this.runtimeStyle.height = 0
      )
      );
      overflow:hidden;
    }

The former rule should trigger as many alert boxes as there are png images in the document, while the latter will open multiple pop ups. This shows that the property itself is "irrelevant" and also that the expression is not endlessly evaluated with the first rule.

Things to consider

  • Images (image elements, not background images) will resize themselves like images do (check the demo page, the dimensions of the first image is set in EMs).
  • background images will not tile and their position will always be top/left.
  • links may become unclickable and forms unfocusable.

Note that the two last issues are due to how the DX filter is applied, these problems are not triggered by this solution per se.

Validation

When it comes to CSS, I do not really care about validation, but if you want this trick to pass the validator then you'll need to wrap the above rules in a conditional comment (for IE 6 only) as shown below:

<!--[if IE 6]>

img {
  behavior: expression(
  (this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
  this.runtimeStyle.paddingTop = this.height,
  this.runtimeStyle.height = 0
  )
  );
  overflow:hidden;
}

.png {
  behavior: expression(
  (this.runtimeStyle.behavior = "none") && (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) && (
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')",
  this.runtimeStyle.zoom = 1,
  this.runtimeStyle.backgroundImage = "none"
  )
  );
}

<![endif]-->

With this conditional comment, there is no need to use the star HTML hack nor the escape character

Further reading

Please use this contact form to send feedback and report errors.