1. .container {
  2. background-image: url(yingyang.png);
  3. position: absolute;
  4. ...}
  5. .dim {
  6. height: 200px; width: 200px;}
  7. ul {
  8. margin: 0;
  9. padding: 0;
  10. ...}
  11.  
  12. <!--[if lt IE 7]><style>
  13. .filter { /* remove the blanks */
  14. filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='yingyang.png', sizingMethod='crop');
  15. }
  16. .container { background-image: none; }
  17. ul a {
  18. position: relative;
  19. z-index: 1;}
  20. </style><![endif]-->
  1. <div class="container dim filter">
  2. <ul>
  3. <li><a href="#">link...</a></li>
  4. </ul>
  5. </div>

A

  1. <div class="container dim">
  2. <ul class="dim filter">
  3. <li><a href="#">link...</a></li>
  4. </ul>
  5. </div>

B

PNG alpha transparency: AlphaImageLoader filter flaws

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader

This MS proprietary alpha image loader filter is often used to work around the missing 32-bit PNG alpha transparency (24-bit + 8-bit alpha channel) support in IE6/Win. The AlphaImageLoader filter is a “procedural surface”, it displays an image “between the object background and content” [Visual Filters and Transitions Reference]

The new PNG capabilities of IE7 aroused appetite and some moist hands. But as a matter of fact, we'll see more and more of this filter stuff to bring IE6 on a par with IE7.

Problem: Links don't work

Links placed above an element with a filter attached may not work. There are two settings with different solutions:

Workaround for “positioned filters”

The workaround I am presenting requires an additional inner wrapper to the positioned element without any logical inherent explanation.

I had to move the filter from this absolute positioned element to a non-positioned child (which has "layout", e.g. by applying a dimension) to get the links to work, in this case, the ul (see test B). Of course, alternatively, we could build two independent absolutely positioned containers, one for the image, one for the links, and overlay them.

General steps to fix this bug

You have an absolutely or relatively positioned box with a filter patched on it. This box contains links that don't work.


<div id="posbox">
    <a href="#">link</a>
</div>
Step 1: Build an inner wrapper

<div id="posbox">
    <div id="innerwrap">
        <a href="#">link</a>
    </div><!-- inner -->
</div>
Step 2: Apply hasLayout = true to the inner wrapper
The computed dimensions of the #posbox can be determined by a given width/height or by its content. If it has a given width/height, apply width: 100%; and/or height: 100%; to #innerwrap – eventually, this may require paddings to be moved. Otherwise, if the computed dimensions are just determined by the content of #posbox, apply zoom: 1; to #innerwrap. Learn about hasLayout.
Step 3: Move the filter from the positioned box to the inner wrapper
Step 4: Apply position: relative; z-index: 1; to the link

Technical notes on this example

I think it's not a z-index-related problem because I can give the links their own background, which can be seen above the transparent png, but the non-transparent regions still won't work.

Problem: The filter does not apply at all

Lots of reasons for this. Check for a starter:

Problem: background-position, background-repeat, background-attachment do not work

Yes. A filter is not a background image. You cannot tile or position the image displayed by this procedural surface. You might stretch the image by setting the filter's sizingMethod property to scale.

Problem: filter won't validate

Of course not. It's a proprietary extension of Microsoft. Place it inside an external style sheet for IE-hacks, and link to it from within Conditional Comments. This does not make it valid, but the validator cannot see it anymore.

Script resources

These scripts conveniently apply the AlphaImageLoader filter, with its drawbacks, that is.

Alternatives

I wonder if authors have attempted a similar effect with a 100% transparent single color of an indexed palette in PNG/GIF. Many help forum questions regarding the filter arise out of a situation where only a full transparency would be needed.

An alternative may be a special PNG8 format, supported by Adobe Fireworks. The 4-bit alpha channel shows a semitransparency in modern bowsers and degrades in IE < 7 [PNG8 - The Clear Winner], so there is no need for a filter or browser hacking. But it depends on the image how graceful such a degradation in IE < 7 really is, as any transparency will become invisible. With my Yin Yang gradient image, the method is not useable.

Example with 8-bit PNG alpha transparency

Notes on this filter concept

Despite of my attempt to answer frequently asked questions, I don't advocate the use of this proprietary extension. IE6 does not support 32-bit PNG alpha channel transparency. Filters add to “layout” elements and interact with the event handling. This is a buggy concept. A filter is not a transparent background, it's an element for its own that resides far out off the specs.

Beginners just want to have a nice transparent effect. Often they will end in an IE versioning hackery that is too much for them to handle at that specific point in the learning curve where transparency is interesting. Advanced authors should be experienced enough to design an appealing layout without these filters.

To conclude, I advocate a “degradation without grace”, and I think this is appropriate for IE6. But I don't have many illusions in that regard. As a side note, the next proprietary extension from browser implementators should at least allow for placing its name on one headline.

Created, and last updated:
May 31, 2005
Oct 23, 2007
Author:
Ingo Chao (CSS-Service: dolphin's back)
Contact:
info.spam@satzansatz.de
Copyright notice:
This work is published under a Creative Commons license.