Advanced Search

Return to Snippet

Revision: 6166
at May 2, 2008 08:28 by HerrSerker
Initial Code 
<html>
<head>
<style type="text/css">
.alphahack {
  position:relative;
  margin:0px;
  padding:0px;
}

#alphapng {
  background:url('path-relative-to-css-file/some-alpha.png');
  width:100px;
  height:100px;
}

* #alphapng { /*Hack für IE */
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path-relative-to-html-file/some-alpha.png');
}
</style>
</head>
<body>
<div id="alphapng">
<p class="alphahack"><a href="will-probably-work.html"></p></div>
Initial URL 









Initial Description





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









Initial Title





PNG support in Internet Explorer 5.5 - 6 with working links









Initial Tags





css, links









Initial Language





CSS