5

I have the following HTML:

<a><img src="myfile.png" /> Some text</a>

And this css:

a:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;
}

The problem with this occurs in both IE 8 and IE 7.

When the PNG image is subject to the -ms-filter or filter, its alpha transparency is ruined. Try it out and you will see. It is a bug in both IE 8 and IE 7.

Can I remove the "-ms-opacity" and "filter" properties applied in CSS? What is the syntax for this? (e.g. something like -ms-filter: "";)

Does anyone know a work around to this issue?

2
  • I don't think we understood your question. Could you try reword it? Commented Jun 17, 2009 at 3:58
  • @SpliFF et al. - Can someone please add (or edit) an answer to give the css required to make a png with partial transparency display with 75% opacity in IE 7 and 8. This is the original question and no answer is complete.
    – OrangeDog
    Commented May 2, 2012 at 16:02

3 Answers 3

10

Just embellishing SpliFF's answer, I could fix this problem by adding the following jQuery to my page:

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
});

This will apply the AlphaImageLoader too all PNGs in the page.

1
  • This little script (and a few span tags around the images I'd like to fade) is a wonder and a treasure for those who have to wrestle with the MSIE abomination.
    – Brian
    Commented Oct 15, 2009 at 17:53
4

UPDATE: AlphaImageLoader filter applied directly to the img may override the Alpha filter. As for removing a filter have you tried filter:none; ?

Yes, programmically target IE6 and below with conditional comments.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Also scripts like IE7-js will handle PNG transparency for you without cluttering up your CSS with non-standard code.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
5
  • Sorry I am not interested in IE 6 - I am trying to get this working in IE7 and IE8 when using the '-ms-filter' or 'filter' css properties.
    – cbp
    Commented Jun 17, 2009 at 3:48
  • The solution works for ie7 too. just change the condition to lt IE8 and the script to ie8.js
    – SpliFF
    Commented Jun 17, 2009 at 3:55
  • But the problem is occurring in IE 8 even: when you apply either the 'filter' or '-ms-filter' properties in CSS, any PNG alpha transparency no longer works.
    – cbp
    Commented Jun 17, 2009 at 3:58
  • ah.. ok, I misunderstood the question. Maybe try applying an AlphaImageLoader filter directly to the image and see if it overrides the Alpha filter on the A.
    – SpliFF
    Commented Jun 17, 2009 at 4:01
  • well, I also need to remove the filter in style override (think .loading or .active css classes), filter:none does not work :(
    – skrat
    Commented Aug 10, 2009 at 9:19
2

For people looking for another answer, I solved this using this following code I wrote myself in plain JavaScript, so it's framework independent. Still you have to put it inside your framework's DOM ready event (or you can use domready.js like I did). It loads all the images with .PNG extension with the AlphaImageLoader. It has to be done before your apply the Alpha filter (you can apply the filter after this code with JS also).

The code below:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Remember to put it inside conditional comments for IE:

<!--[if IE]><![endif]-->

Please let me know if it worked fine. Kind regards!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.