Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

IE and .PNGS - Fini.

5.7.2007

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:

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.

Permalink

Tags: code css graphics html photoshop

Authorized users may log-in to leave a comment.

Last Blog: IE and .PNGs Continued.

Next Blog: Saturday Frolics.