Tanveer’s Weblog

[HotFixer] Transparent PNG support into IE6 using TwinHelix

July 29, 2008 · 2 Comments

Couple of days ago one of my colleague asked my why ie6 couldn’t be able to show a trasparent png image ! He was so rock n roll mood about this matter ! :D n asked me is there any solution to fix this crap!! Unfortunatly i dont have any thing to say. So i googled for a while n got the answer. Here is the key things we can do to fix this bug.

1. Download TwinHelix iepngfix.zip v1.0 (37kb) under GNU LGPL, version 2.1 or later. After that you can open “iepngfix.html” in a browser; to find the step by step instructions.

2. Copy and paste iepngfix.htc and blank.gif into your website folder.

3. Copy and paste this into your website’s CSS or HTML:

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

That CSS selector must include the tags/elements on which you want PNG support — basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:

<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>

4. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:

var blankImg = '/images/blank.gif';

Again the path is relative to the HTML file. Otherwise, you will see a “broken image” graphic!

Now if you would like to use this behavior in your defined css class just use something like

<style type="text/css">
.myimg{ behavior: url(/css/resources/iepngfix.htc);padding-left:5px ... }
</style>

That’s it ! You are done. Now you can enjoy any transparent png image file any where in your web derictory

;)

Ref: twinhelix

Categories: Fun · Tips' n Tricks'
Tagged: , , ,

2 responses so far ↓

Leave a Comment