I have a nice logo for one of my sites, but naturally IE6 and earlier can't do alpha transparencies. However, I thought there might be a decent workaround with javascript or something else. I have an acceptable transparent GIF file that doesn't look pretty but will get the job done. Is it possible to show the GIF or the PNG dependent on the browser being used? I tried researching this a bit, but didn't come up with anything very good.

If you're okay with putting a hack in then you can kludge PNG alpha transparency in IE 5.5 and IE 6.

Otherwise, I'd assume you could do it via client side via Javascript or server side by checking the user agent string but thats a tad messy.

I've been using a similar filter targeted at IE6 for over two years now. First PNGHack by Aaron Porter and as of last year, IE PNG Fix by Angus Turnbull.

I prefer this last one to what was just linked above. It can handle background images without a problem, but the way I have it set up you will specify the "behavior" for specific background selectors instead of everything on the page. Applying to everything would be overkill in most cases.

Since IE (any version) will always require a separate style sheet to make up for box properties and other crap MS just gets wrong, it's the perfect place to also include the behaviors without letting other browsers see them. I now keep a general IE css file and then an IE6-specific css file as well.

Much of what's broken with IE 6 is also broken in IE7 unfortunately. The smartest thing MS could possibly do would be to toss their crusty old and hacked-up Mosaic-based engine in favor of Webkit. I won't hold my breath though.

Matt, if you need any implementation details for this you can contact me via email. I'm just working on some new web layouts right now and have again made extensive use of alpha and IE fixes of all sorts.

I found this amusing. There is now an active campaign to get people off IE6.

http://www.savethedevelopers.org/

I visited over a dozen of the sites supposedly supporting them (with IE6) and none had the script installed. I tested it on one of my own development layouts and it does work. I just don't think it's a strong enough message.

I was contemplating putting up a large floating div that has to be clicked to dismiss telling people who visit using any version of IE that their browser is crap.

Yes, you can do this. I have an extremely convoluted system that displays transparent graphics depending on which browser version is being run. For the browsers that support it, you get the nice alpha-transparent PNGs. For the browsers that barely support it (there is an intermediate version of IE that could do transparent PNG if you called the right directX graphics library and also feed it a blank transparent GIF as a background image) it does the needful. For browsers that don't support it at all, it shows the crappy hard-edged GIF.

It all uses the IE feature of conditional comments. You make comments with the "IF IE" tag and then certain versions of IE render them. I had to do it with a bunch of DIV's to make it work for all browsers.

It's all there at www.vixyandtony.com , do a "View Source" on the main root index page or the Music page. (The other pages don't need the special code because the cartoons don't intersect the top bar of trees.)

Fortunately (or unfortunately?) there's only one browser in use today that doesn't support PNG alpha and it's IE6. Anyone doing anything on their page to try and support anything older than that (IE5.x or Netscape 4.x) is only doing themselves and the rest of the world a disservice.

All versions of IE require a conditional to tune the styling. The PNG javascript fixes mentioned earlier should all ignore newer versions of IE, though you can also make a conditional specific for IE6 (which I do just so I can toss any other daft styles in there).

I'm going ahead with my idea of calling out IE users and have just started to make a style for a block element that will only display on IE. I'll likely make some way to hide it by clicking some part of it, but for now it will be static at the top of all pages using a new template I'm working on. It's going to spell out in no uncertain terms that IE sucks. And provide links to proper browsers.

I'm specifically supporting IE5, although I haven't tried netscape 4.x.

Anyway, the intermediate browser that I'm supporting which WILL do PNG alpha through a DirectX call is IE6. I've got that working, it's what I do at www.vixyandtony.com .

So in summary, what my code does is:

IE5 and earlier, or any IE that responds to conditional comments and recognizes itself as earlier than IE6: transparent GIF.

IE6: DirectX call using a transparent GIF background and an alpha PNG foreground to get alpha transparency.

Everyone else: Full PNG with alpha transparency.

Fortunately, I can do all of the above with conditional comments and I don't need any javascript.

Umm, your DirectX code isn't using any javascript? Or maybe you meant you don't need to use any javascript for browsers other than IE6.

By transparent gif for IE5, do you mean you're serving up gif versions of all your PNG images or are you serving up blank rectangles?

That's correct. No script is needed at all. The call is just a straight HTML tag that happens to be supported by IE6. It looks like this. Note how I must supply it a blank transparent GIF as a background, in addition to the PNG file foreground in order for the DXImageTransform function to work:

<img align=right style="z-index: 3; position: absolute; right:5px; top:-77px; padding: 5 5 5 5;" src="2x2blank.gif" width="162" height="225" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='graphics/toon_hello_transparent.png', sizingMethod='scale')">

Encasing the above code in the IE conditional comments takes care of it for me. No script needed.




I mean I've got two versions of each image: A transparent GIF with jaggy edges, and a transparent PNG with nice smooth edges. IE5 and earlier IE's get the GIF, everyone else gets the PNG. IE6 is a special case that uses that DirectX call.

Wow, that's a lot of work to maintain the alphaloader without javascript to apply it. It means you have to hand-tune each and every image you use it with. It also means it won't work with a background image. Almost every image I use now in site design is a background image.



You're one dedicated guy. Personally, I feel totally justified in letting anyone running IE5 get what they get. I don't think I've ever even tested any page in the past 5 years with any IE5 Windows variant. I tested briefly a few years ago with IE 5.5 on the Mac to see how it blew up completely on my corporate site though.

Microsoft should adopt Webkit. I think in the new year I'm going to stop testing in IE6 except to make sure my warning DIV comes up properly.

All browser tech moves too slowly though. I'd like to see support for JPEG2000 and JPEG XR (formerly Microsoft's Photo HD) come sooner rather than later. I won't hold my breath though. PNG is over 10 years old and only recently can be considered a viable default image type. I used PNG exclusively for the design of my site in spring 2006, just before the 10th anniversary of the final 1.0 spec.

BTW, anyone using PNG should also run their images through OptiPNG, PNG Crunch and advPNG. The purpose is to strip out metadata, color profile data and compress the images as much as possible, while maintaining full quality. You'd be surprised how much space you can save. Also, if anyone is using Adobe software to savve PNGs, under no circumstances should you ever "Save" or "Save As" to make your images. You must create the pre-final PNGs using the "Save for Web" feature/interface if you don't want them to be mostly bloat.

Agreed. IE5 dropped below 1% marketshare back in late 2006 and is now near 0.12%. At this point, you would only be cutting out the Windows 95 user base, as even Windows 98 can run IE 6.

Not at all. I just save two versions of the picture: One I save as GIF and one I save as PNG. The built-in GIF/PNG/JPG optimizer in Paint Shop Pro handles it all for me.



Well the IE5 support was the easy part, it sort of just followed along with the IE6 support, which is the more complicated part, but it's really not that complicated.



Not sure what you mean. If you mean that I can't put something else on top of it, I'm not sure if that's true or not. The image example I gave happens to be set to be the top in the Z-order, but that was just something I wanted to do in that particular case. I think you can still put other stuff on top of it.

If you mean that I can't put it atop another background image, yes I can because that was my point: To get alpha-transparent PNGs atop a different background image in IE6.

No, I meant that what you showed is included in the markup and specifies the PNG file within the style attribute. You likely couldn't use that exact same technique with a PNG file (with alpha) used as a background image of some other element (specified in a css). I generally don't use IMG markup tags for any part of the design, but for IE6 do keep IMG styled with the alphaloader javascript behavior. That way I don't ever have to add any extra markup to get alpha to work on any image I happen to use as content. Design level graphics still need special treatment, but nothing more than the same behavior applied within the IE6-specific css.

If you were to disable styles on the template I linked to, you would get nothing but text in place of the visual design. The only images that would show up are the screen and product shots because they're content.

It's generally safe to use a javascript-based PNG alpha loader for IE6 because just about 100% of people using IE6 are also going to be running with javascript enabled. Someone's still running IE6 is likely doing so with a pretty default configuration.

Ah, see what you mean. Dunno if that would work or not.

The javascript alphaloaders are doing essentially the same thing you've done of course, but they're automating the process as the page loads.

I have done my first pass at an IE6 warning element. I've decided to make a companion page to go along with it featuring download links to other browsers (this part isn't done yet). If I'm happy with the way it looks, I'll zip it up and let other people download it to add to their own sites. No javascript and no having to link to other sites. Though I think I'd like to have an optional cookie to allow visitors to hide the warning for a week or two, so that will need at least a couple of lines of JS.

If you have a copy of IE6 to test with, see the result here.

I'm also considering changing the image to a GIF instead of a PNG so that I can animate it scrolling down.