RE: IE6 PNG Fixes

2011-03-29T13:03:36Z

Hi Gene

well done! This helps me so much... tks so much

Regards, Nicola

RE: IE6 PNG Fixes

2011-03-29T12:46:54Z

Gene, thanks for the fixes. I was having the same problem with IE6 and PNG. I'll try out your solution.

IE6 PNG Fixes

2011-03-29T07:05:56Z

Hi,

I'd like to share my IE6 fixes and if possible contribute them into LR.
As you know LR6 already has IE PNG fix if you use <img> with src which ends with ".png" or you could force it by applying class png.
That's cool, but...

1) Background Image
In the classic theme there is company logo which is set in CSS as background-image. PNG fix does not work with background images.
So I had to make the following modification:

<h1 class="company-title">
	<a href="$company_url" title="#language(" go-to") $company_name">
		<img src="$company_logo" alt="$company_name" class="png">
	</a>
</h1>

It does not resolve the problem in general, i.e. there are more elements that have PNGs in background-image, it could be resolved using CSS3 PIE (Progressive IE).

2) Input type=image
There are some inputs in the classic theme type=image with src=$.png, IE PNG fix does not work for them.
In order to fix them I made the following code snippet:

jQuery(function() {
    jQuery(".ie6 input[src$='.png']").each(function() {
        var bgIMG = jQuery(this).attr('src');
        jQuery(this).css('background', 'none').css('width', jQuery(this).width()).css('height', jQuery(this).height());
        jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + bgIMG + '\');';
        jQuery(this).attr('src', spacer_image);
    });
});

As you might know LR6 comes without jQuery which I'm a big fan of. Thus, to make it working:

portal_normal.vm gets these lines in <head>:

<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
	   jQuery.noConflict();
</script>

and init_custom.vm:

<script type="text/javascript" charset="utf-8">
    var spacer_image = "$spacer_image";
</script>

3) And last but the most time consuming thing I've done is CSS sprite with PNG fix. I didn't find any library which could solve this problem easily. In addition the icons that use CSS sprites have src=spacer.png so I had to treat them in a special way.

Here's what I did:

jQuery(function() {
    /** CSS sprites png fix */
    var sprites = [
        ['.aui-icon-home', 112, 0],
        ['.aui-icon-clock', 112, 80],
        ['.aui-icon-person', 144, 96],
        ['.aui-icon-document', 96, 32],
        ['.aui-icon-document-b', 96, 48]
    ];
    for (var i = 0; i &lt; sprites.length; i++) {
        var els = jQuery(".ie6 img" + sprites[i][0] + "[src$='spacer.png']");
        els.each(function() {
            var 
                el = jQuery(this),
                bgIMG = el.css('background-image').replace('url("','').replace('")',''),
                width = el.width(),
                height = el.height(),
                top = sprites[i][1],
                left = sprites[i][2],
                margin = 3;
            var sprite = new Image();
            sprite.src = bgIMG;
            var container = jQuery('<div class="sprite-icon-container"></div>').width(width).height(height);
            el.wrap(container);
            el
                .css('position', 'absolute')
                .css('background', 'none')
                .css('background-position', 'top left')
                .css('width', sprite.width).css('height', sprite.height)
                .css('top', -top+margin).css('left', -left-margin)
                .css('clip', 'rect(' + top + 'px,' + (left + width) + 'px,' + (top + height) + ' px, ' + left + 'px)');
            el.parent().css('position', 'relative');
            el.get(0).runtimeStyle.filter = 
                'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + bgIMG + '\',sizingMethod=\'scale\');';
        });
    }
});

So basically it uses clip CSS property with absolute positioning instead of background-position.
As you can see I had to define an array of the css classes of icons I want to fix together with the top and left coordinates in the sprite.

I hope it makes sense for you and if it helps to make LR better I would be happy

-Gene