advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

HerrSerker on 05/02/08


Tagged

css png links alpha working directx


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

HerrSerker
basicmagic
Wiederkehr
JimiJay


PNG support in Internet Explorer 5.5 - 6 with working links

Published in: CSS 

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


Plain TextExpand 
  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 

You need to login to post a comment.