PNG icons in IE6

One of the most controversial things we've done for version 4.3 was to switch all of the icons to using PNG icons.

This wouldn't be so bad, as IE can render PNGs with index transparency just fine. The problem comes in when you use PNGs with alpha transparency.
What's the difference?

There are two types of transparency when it comes to images. Index and alpha. File formats with index transparency use only 8 bits of information. This means that for transparency, you have a lot less flexibility it transparency.
You essentially get on or off transparency. Something is either transparent, or it's not.

With alpha transparency, however, you get a wider array of options. Most alpha transparency uses 24-32bits. This means that you could have gradients, fades, and other options that you can't have with the index formats.

As I said before, the switch was pretty controversial, but not because of the file name switch (though that causes some problems, they're fairly easy to overcome), but because the default icon set in the Classic theme uses alpha transparency.

This means that people who view the site with IE6, roughly half the market as of this writing, will see a grey background behind each icon.

We tried numerous methods to get around this, even converting the icons to using index transparency. The problem with that was that it made the icons ugly for everyone, even the other 50% of the market who CAN view alpha transparency based images.

So, I recently discovered a fix that is absolutely brilliant. I have to give many thanks to the talented Rogie King who developed it.

It's pretty hacky, but it works.

As of version 4.3.5, we'll be including this fix in the base themes, and including a macro for people to use. The way you will use it in version 4.3.5 is to place this line into the style element of the head of your document inside of portal_normal.vm:

#ie6_png_fix()

But, if you don't want to wait for version 4.3.5, here is how you would use it now. In the same place where you'd put the macro (in between style tags inside of the <head> of your portal_normal.vm) add this:

/* ---------- IE6 PNG image fix ---------- */
.ie6 img, .ie6 .png{
    azimuth: expression(
        this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "$images_folder/spacer.png"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
    );
}

You can also add a class of .png to any image that you'd like to apply this hack to.

Some caveats, though:

This does not work on images with background positioning.
This will not work on all Liferay generated elements (for instance, the tabs use background images, and rely on background positioning to work)
Must exist inside of portal_normal (can't be in an external CSS style sheet)

I think this should really help the web devs amongst us. Enjoi, guys!

Kommentare hinzufügen

Bitte loggen Sie sich ein um fortzufahren.

Wow awesome. What happened to that javascript fix for png's you showed me a while back? Is that not supported anymore? Sorry, I bet this question is very vague. If you don't remember, don't bother. haha.

Melden Sie sich an, um auf diesen Beitrag zu antworten.

Menü-Anzeige

Blogs

Kategoriennavigation

Weitere Blogeintrag

Power Outage

Friday Funkfest Nov.09.2007