Backwards compatible Silk Set icons with Fireworks

Do you use the Silk icon set? Frustrated with the "blue border" in IE6? PNG fixes getting you down? I'll show you how to avoid both of these using Fireworks to create a "backwards compatible" version of the Silk Set library.

Download Icons Now

Most of you will be only too familiar with the problems associated with Internet Explorer 6 and alpha transparent PNG images. It's inability to correctly render semi-transparent pixels (alpha channels) mean that web developers constantly have to use javascript hacks to remove the ugly blue border which appears around these graphics.

This situation is bearable if you are using only a few PNG files in your design, but what if you have a design that uses many smaller images, such as icons? When this happens you can quickly find yourself having to "fix" numerous instances of the dreaded "blue border" in IE6, which is not only inconvenient but can also really slow your website's rendering speed.

For example, here at DeepBlueSky we regularly use the fantastic Fam Fam Silk icon set by Mark James. It's a brilliantly useful set of 16x16 png files which make full use of the alpha-transparent format. It's great for modern browsers, but it produces unacceptable results in IE6.

The Solution

Thankfully however, there is a method for exporting png files which contain alpha transparent pixels so that they look acceptable in IE6 whilst still looking great in modern browsers. This solution has been well documented and effectively removes the problem of the "blue border" in IE6 allowing you to drop in your png icons without having to worry about backwards compatbility.

I've used Adobe Fireworks to create a PNG-8 versions of the whole Silk Set icon library making it  "backwards compatible" in Internet Explorer 6. Modern browsers get the full alpha channel experience whilst IE6 gets an acceptable compromise similar to that seen when you don't specifiy a Matte colour on transparent .gif graphics.

Download

You can download the full IE6 Silk Set (with kind permission from Mark James) direct from here. All the original licenses still apply so please see Mark's site for full details.

Write a comment.

Responses. (2)

  1. D S

    David

    Any problems?

    Has anyone who's downloaded noticed any problems.

    If so let me know and I'll try my best to fix them.

  2. l b

    luke

    corners missing

    hi

    thanks so much for posting these. Many look OK in IE6 but some (email.png) have missing corners. Is there any way to adapt these in a diff progrma to Fireworks? My photoshop doesnt seeem to do 8 bit pngs :(

    thanks for all the work you did on this anyway!

    Luke