PNG transparency issue in IE8

by

FIXED!

I’ve been wrestling with the same issue, and just had a breakthrough! We’ve established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you’ve got an opaque background, and that pretty much defeats the purpose.

Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway…

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen – it’s all good.

More Related Contents:

  1. How to fix Array indexOf() in JavaScript for Internet Explorer browsers
  2. ‘console’ is undefined error for Internet Explorer
  3. Why doesn’t indexOf work on an array IE8?
  4. javascript document.getElementsByClassName compatibility with IE
  5. Does IE8 out-of-the-box have support for ‘localStorage’
  6. How can I use console logging in Internet Explorer?
  7. install flash player automatically with javascript [closed]
  8. Why don’t self-closing script elements work?
  9. Capture HTML Canvas as gif/jpg/png/pdf?
  10. Why doesn’t this arrow function work in IE 11?
  11. Do HTML5 custom data attributes “work” in IE 6?
  12. how to save canvas as png image?
  13. ‘onload’ handler for ‘script’ tag in internet explorer
  14. How can I prevent the backspace key from navigating back?
  15. How to start automatic download of a file in Internet Explorer?
  16. Access denied to jQuery script on IE
  17. How to getting browser current locale preference using javascript?
  18. “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)
  19. window.resize event firing in Internet Explorer
  20. jQuery change event on not firing in IE
  21. Prevent Use of the Back Button (in IE)
  22. Conditional comment for ‘Except IE8’?
  23. “pointer-events: none” does not work in IE9 and IE10
  24. IE’s document.selection.createRange doesn’t include leading or trailing blank lines
  25. Clone a file input element in Javascript
  26. JavaScript: How to simulate change event in internet explorer (delegation)
  27. Can’t dynamically add rows to a in IE?
  28. JavaScript Profiler in IE
  29. postMessage still broken on IE11?
  30. XMLHttpRequest: Network Error 0x80070005, Access is denied on Microsoft Edge (but not IE)

Leave a Comment