Blogs about graphics:
Alpha Transparent .PNGs in IE6 Using Fireworks.
I have finally got around to researching Alex Walker's article on PNG8 and their potential to solve the old IE6 grey background with alpha transparencies problem. I am pleased to report success with this method, and I've written an article about how to edit your alpha transparency .PNGs for use in IE6.
The great news about this technique is that this works just fine, and gives you one single file that works in IE6 and earlier, but has no loss of quality in the other browsers. The bad news is that your image will have a faint jagged edge when viewed it IE6. The bad news is that if you have a lot of alpha transparency in your image, it will look pretty bad in IE6. If this is the case, you should consider re-matting the image against the desired background color.
Bear in mind that you may not need to worry about IE6. Check your your web site's stats to see if you're getting a sufficient number of IE6 users to justify the effort involved in changing all your images. The only statistics that matter in making this decision are your own.
0 comment(s).
Permalink
IE and .PNGS - Fini.
You've looked at your site's statistics, and decided to create some .GIFs for your early IE users, so that they can view your site without all the ugly backgrounds that IE adds to your beautiful alpha transparency .PNGs. Here is a recap of why:
- The .GIFs will make your site look nice in all versions of Internet Explorer, not just IE5.5 and IE6.
- You are fixing the ugly images using the same technology that created them initially. A JavaScript solution won't work if the user has disabled JavaScript.
- No JavaScript, no behaviors - no code you can't grok.
- This solution uses the absolute minimum lines of code. Less code is why you're using CSS right?
Here's the best may to get it done. (This walk through uses Photoshop CS2; adjust your steps accordingly for other tools.)
First, set the foreground color to the background color for your .GIFs. Then, open up one of your beautiful .PNGs.
In the Actions palette, click the 'New Action' button - shown right. Give it a name (I've used "PNG into GIF") and click Record.
In the Layers Palette, create a new layer - this will be called Layer 1 by default. Then click and drag Layer 1 below the existing layer (Layer 0) for your .PNG. Make sure that the new layer (Layer 1) is highlighted.
Now select the paint bucket tool, and click anywhere on the image. Easy! The penultimate step is to save the image.
From the file menu, choose Save For Web. Be sure that the file type is set to .GIF, and click the Save button. Go to the appropriate location, and then save your new image.
Last, click the 'Stop Recording' button in the Actions Palette. (Example shown right.) You can now close the original .PNG, without saving the changes.
Now, whenever you need to make a .PNG into a .GIF, you can simply open up Photoshop, set your foreground color, and then click the Play button (in the Actions palette). If you need to create even more .GIFs at once, use Photoshop's Batch processing.
Now that you've created the .GIF images, just use some conditional comments to override the .PNG background image declarations with the .GIF background image declarations, only for early versions of IE. Example:
<!--[if lte IE 6]>
<style type="text/css">
#header { background-image: url(images/header.gif); }
</style>
<![endif]-->
Simply use create a new declaration for background-image with the new .GIF file specified. The other background properties such as repeat and alignment will be retained.
Conditional comments will always be ignored by non-IE browsers, and are designed specifically for the purpose of delivering code to certain versions IE only. They are a much tidier way to deliver browser specific CSS than using hacks or browsers detection scripts. You can learn more about Conditional Comments at Quirksmode.org.
0 comment(s).
Permalink
IE and .PNGs Continued.
As I continue on my discussion of using .PNGs in IE, please note that you must view this page in IE 6 or 5.5 to see the effects of the scripts.
The first solution I investigated is Bob Sola's pngfix.js solution. It is essentially based on the AlphaImageLoader filter. The clever part is that it uses JavaScript (hidden in conditional comments) re-writes the HTML tags for the .PNG images as needed. Mr. Sola has conveniently provided 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!
Secondly, I looked at Angus Turnbull's CSS-Only IE .PNG solution. It works by using CSS to apply a behavior (another IE-only scripting method) to the troublesome .PNG images. (Quick & dirty install instructions.) It still relies on the AlphaImageLoader filter, so no support for IE earlier than 5.5. Also, don't try testing from a local directory on your computer; the .HTC file seems to require that the page be hosted from a server. But it actually works pretty well, as you can see on Fire Flower, Starman and Mr. Goomba here. You've got to be careful with your borders & height/width tags - see how Mr. Goomba is a little fuzzy here? Also, the fix only applied itself sporadically on when used page; which is what's causing the sidebar elements to be too long, and hence the whole sidebar doesn't fit floated next to the main content. I'd say it's a reasonably good solution if you're dying to go this way, but it's not yet perfect.
After looking at all these script-dandy solutions, I haven't found one flexible enough to be worth the effort it takes to implement it. The ROI just doesn't exist for me. Particularly since IE7 does handle the .PNGs well enough, so the future is looking up.
IE6 isn't gone yet, so it still needs a solution for websites that must degrade gracefully. The solution I'm going to propose isn't clever. It's dead simple, requires an absolute minimum of code, and provides a semantically appropriate solution for IE6, IE5.5 and earlier. My solution is to make .gifs. Next time, I'll give you a Photoshop tutorial for changing all your .PNGs into .GIFs for IE only. If it's worth it to you...
0 comment(s).
Permalink
IE and the AlphaImageLoader for .PNGs.
With all of the useful features available in .PNGs, you might wonder why they aren't used more frequently on the web. This is largely because the .PNG support for IE6 (surprise!) isn't quite up to snuff. IE6 can't natively handle the alpha-transparencies (that smoothing effect) in .PNGs. Instead, IE will render your beautiful images as shown to the right, with a light blue background behind any transparent pixels if alpha-transparencies are used. (IE6 can handle opaque & fully transparent pixels (the same kind you get in .GIFs) in .PNGs just fine.)
So, what can you do? You can use the popular alpha channel loader JavaScript. It does get the job done on our volunteer goomba here. But, there are many problems with this method. First off, it relies on JavaScript being available, and it only adds enables the correct display in IE6 and IE5.5. Second, since it's proprietary IE code, no other browsers can read it, and they'll just show an empty box with a white dashed border instead of Mr. Goomba. (You could use conditional comments and JavaScript to feed a solution to IE.)
But see here what happens as I try to use this solution in practice. I have a small pin image that I used as a background for breadcrumbs. I really need the image to appear once on the right side of some text that's floating right. But it stretches to fill the height & width of the div that's filled by the crumbs.
No problem, right? Just add another (non-semantic) div (red dashed border this time) to surround the AlphaLoader div. But I've got to make the AlphaLoader div an inline element to make the pin appear on the same line as the text, and then the image disappears.
Our IE / Alpha .PNGs saga continues next time, as we test more exotic solutions.
0 comment(s).
Permalink
Goomba Code.
Some people use goats in their code. I prefer goombas. I've been working with CSS quite a lot lately, and I've discovered the only thing a Goomba really wants for Chistmas. Check it out in the code section if you're interested. Goombas really are simple folk.