Advanced Search

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 ( http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx ).

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

Expand | Embed | Plain Text

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. }
  9.  
  10. #alphapng {
  11.   background:url('path-relative-to-css-file/some-alpha.png');
  12.   width:100px;
  13.   height:100px;
  14. }
  15.  
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.