IconBuffet | Free Icons, Stock Icons, Custom Icon Design

Dave on Apr 26, 2007

There is a bit of JavaScript that you can put on a page that forces IE6 to use it's filters to make 32-bit PNGs look as they should. I'll see if I can find it again...

iconmaster on Apr 26, 2007

Use the javascript hack to make the PNG show correctly in IE6.

Dave on Apr 26, 2007

In fact, it seems all it takes is a bit of CSS:

<img src="[yourImage]" />

(the Javascript will probably just be doing that automatically so that you don't have to put the image url twice every time)

Dave on Apr 26, 2007

lol, the forum stripped it. Second try:

<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=[yourImage],sizingMethod='scale')" src="[yourImage]" />

justG on Apr 26, 2007

I used PNG24a for the first time on ArtRageous!, and handled browser compatibility by ignoring it completely. I realise this is not an option for a professional gig, but this was a personal project, so. =]

bcarneiro on Apr 26, 2007

who cares about IE?

justG on Apr 26, 2007

@barb: Unfortunately, still over a third of the web-browsing population and, consequently, the designers/developers of any corporate web site.

KatieK on Apr 26, 2007

I experimented with this problem last month. I couldn't get the AlphaImageLoader method to play nicely with the floating I was using on my element. The javascript hack Iconmaster suggests seems to have some problems when used with CSS background images on links.

I wholly endorse using conditional comments for IE6 and earlier to replace the .pngs with .gifs. You don't even have to lose the shadow on the images. Just take the .png into Photoshop, add a layer with the bg color you need behind the .png, and then save that as a .gif. Do it once and save the steps as an action, and then you can repeat as needed.

mik on Apr 26, 2007

Thanks all, this will give me a good start.

So I can pursue using the shadow for IE6 via Javascript, and use a GIF backup or no image for earlier IE's (which hopefully won't be used but I have to cover it). For less mainstream browsers I only need to support more recent versions.

with the bg color you need behind the .png
The challenge is that it won't be in a fixed place, it would be used kind of like a large bullet and so it won't line up with a particular part of the background consistently. I figure without the bottom shadow part, blending the main image to the main background color should work well enough. But I have not experimented yet.

KatieK on Apr 26, 2007

I see. The varying background is a challenge. If I were in your shoes, I'd look at the browser stats for the site you're working on to see how big a deal it is to support IE6 and earlier.

mik on Apr 26, 2007

Nice of you to mention my shoes. ;)

It's not just stats and market saturation, which would be reason enough, but the decision person for this site is still using IE6. Sigh. I'm working on it.

VINZ on Apr 27, 2007

here is a hack for PNG in CSS background and one for images in the html
have a look to reticula.fr
there is a javascript part and a Css part.
i hope it will help ;)

bcarneiro on Apr 27, 2007

justG: I know, but I think things are fortunately changing. There are better browsers available out there, for both users and developers. I've designed my website for any other browser except IE. You will be able to see it, I have used a PNG and it shows with a white background. I don't plan on changing it.

When one of my clients calls me and says: "Hey, there is something wrong with your site", I say, no, the website is fine, IE is not.

I don't do that with my clients' websites, of course, but with mine I really use it to show I don't care about IE.

IE is not safe, it crashes very easily and it doesn't have the compatibility I need as a designer. And now, we even have to add a script for each flash so that it activates it automatically?? It's just ridiculous.

Anyway, :)

justG on Apr 27, 2007

@barb: Oh, I agree completely. I develop my non-paying sites to be broken in IE. *cackle* =]

iconmaster on Apr 27, 2007

Btw, the IB logo at the top of the page is using a variation of the hack I mentioned (it's calling AlphaImageLoader in the CSS instead of in Javascript, like Dave suggested).

Looks fine in IE6, no?

bcarneiro on Apr 29, 2007

FYI
Developing and testing CSS based websites are often a challenge when it comes to Microsoft Products. Developers can spend up to 20% of development time providing alternative CSS for Microsoft's collection of broken browsers. The worst part is Microsoft browser installations only allow you to install 1 browser at a time. So once you've got IE7 installed, IE6 is gone and 7 needs to be uninstalled if you want 6 back.

justG on Apr 29, 2007

There are ways around that. You can Google instructions for having multiple versions of IE installed at the same time. It's a pain, but it's possible. I prefer to just run various operating systems and their respective browsers in virtual machines (i.e., XP + IE6, Vista + IE7, etc.).

mattdetails on May 07, 2007

I second iconmasters solution - I use that as well and works wonders.

KatieK on May 08, 2007

At the risk of upsetting the collective apple-carts - I say Bah! I investigated the JavaScripts recently on my blog, and none of them did it for me.

In short, iconmaster's reccomendation is a nice plug-in solution for the problem, but there are still too many limitations for it to work for me. "CSS backround PNGs not supported" - D'oh!

I also looked at Angus Turnbull's CSS-Only IE .PNG solution. (Quick & dirty install instructions.) It's even easier to implement, but things can still go wrong when the image dimensions don't quite match what IE is expecting. (Box model anyone?)

Changing your .PNGs into .GIFs isn't too time consuming if you set up a action in Photoshop. Using conditional comments to feed the .GIFs to IE takes less code, and is more robust than the more exotic solutions - and isn't that why we use CSS in the first place?

JSun on May 08, 2007

I did the multiple IEs thing fairly easily with an installation. I think I got it from TredoSoft.