Transparent PNG icons IE6

[ser]

When I put a png icon is visible frame around it.


I tried to describe the icon in css

.open {
	background-image:url(../images/icons/open.png) !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/open.png', sizingMethod='scale');
}

but it did not help.
Does anyone can suggest a solution?

[ser]

No one uses IE6?

[Animal]

Not if we can possibly avoid it.

IIRC, IE6 just cannot do this. It's ancient technology.

[steffenk]

Here is a prototype example how to do transparent png in IE6, you should be able to convert it to ExtJS

Element.addMethods({
    pngHack: function(element) {
        element = $(element);
        var transparentGifPath = 'clear.gif';

            // If there is valid element, it is an image and the image file ends with png:
        if (Object.isElement(element) && element.tagName === 'IMG' && element.src.endsWith('.png')) {
            var alphaImgSrc = element.src;
            var sizingMethod = 'scale';
            element.src = transparentGifPath;
        }

        if (alphaImgSrc) {
            element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{alphaImgSrc}",sizingMethod="#{sizingMethod}")'.interpolate(
            {
                alphaImgSrc: alphaImgSrc,
                sizingMethod: sizingMethod
            });
        }

        return element;
    }
});

Event.observe(window, 'load', function() {
    if (Prototype.Browser.IE) {
        var version = parseFloat(navigator.appVersion.split(';')[1].strip().split(' ')[1]);
        if (version === 6) {
            $$('img').each(function(img) {
                img.pngHack();
            });
        }
    }
}); 

[ser]

Thanks steffenk, I will try your method

[devtig]

I have converted it for Ext JS.

if (Ext.isIE6) {    Ext.select('img').each(function(element) {
        var endsWith=function(s) {
            return this.indexOf(s, this.length - s.length) !== -1;
        }, alphaImgSrc, urlMatch;
         
        if (endsWith.call(element.dom.src, '.png')) {
            alphaImgSrc = element.dom.src;
            element.dom.src = '/images/s.gif';
            element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
                'src="'+alphaImgSrc+'",sizingMethod="scale")');
        } else if (urlMatch=element.getStyle('background-image').match(/^url[("']+(.*\.png)[)"']+$/i)) {
            alphaImgSrc = urlMatch[1];
            element.setStyle('background-image', 'none');
            element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
                'src="'+alphaImgSrc+'",sizingMethod="crop")');
        }
    });
}