PNG support in Internet Explorer 5.5 - 6 with working links

/ Published in: CSS
Save to your folder(s)

IE 5.5 to 6 don't support generic PNG with Alpha-Channel
To get the advantage of PNGs use the akward AlphaImageLoader-filter (AIL) as described on the msdn site ( ).

But because the AIL is a DirectX-processing, some links and mouseover effexts in front of the PNG, when used as background-image, won't work, because the AIL will put itself in front of the links (like in the DOM or surface, but not visually).

A workaround for this is, to let the anchor or a surrounding element inside the element with the AIL-filter get the position:relative, or a different position (except static, I guess).

This will again work.

P.S.: AIL will not work with repeated background-mages, because the AIL-filter doesn't support repeating of images

Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .alphahack {
  5. position:relative;
  6. margin:0px;
  7. padding:0px;
  8. }
  10. #alphapng {
  11. background:url('path-relative-to-css-file/some-alpha.png');
  12. width:100px;
  13. height:100px;
  14. }
  16. * #alphapng { /*Hack für IE */
  17. background: none;
  18. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path-relative-to-html-file/some-alpha.png');
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="alphapng">
  24. <p class="alphahack"><a href="will-probably-work.html"></p></div>

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.