PNG Transparency for Internet Explorer

Ever wanted to allow your users to see transparent PNG images using Internet Explorer? Now you can!

[high]Note:[/high] I did NOT create this script, it remains the sole property of it's author.


Pros & Cons

Pros:

• Ignored as a comment in other browsers, so no browser-sniffing code is required
• Works with (X)HTML Strict & Transitional Doctypes
• Does not break W3C validation
• Lightweight and very easily deployed
• Works with existing in-line or external CSS rules based on class or ID selectors
• Works with old-style img align="left" or align="right" attributes
• Adds itself to the end of any existing Body Onload code
• Works with imagemaps and input images using a special version

Cons:

• Doesn't work in IE versions earlier than 5.5
• Requires JavaScript to be enabled - the estimations for how many people choose not to use JS vary wildly.
• CSS backround PNGs not supported - experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable :-(
• CSS rules for the PNG images based on the img selector are lost, but this is easily rectified by adding a class selector to your img rule such that img{..} becomes img,.png{..} - then add the attribute class="png" to each of your PNGs.

To install, simply upload the attached .js file to your /forums/clientscript/ directory.

Then edit your headinclude template, and add the following:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="clientscript/vbulletin_pngfix.js?v=$vboptions[simpleversion]"></script>
<![endif]-->

You're all set.!
Note: Updated to reflect changes by the author, and 3.5.x javascript handling changes. This template modification works fine with 3.6.x as it is, and therefore won't be posted in the 3.6.x forum!

[sensimilla]

I did everything as described and it doesnt work for me with the BBcode manager and rounded quotes hack.
https://vborg.vbsupport.ru/showthread.php?t=120073

Is it possible ? IE 6 here..

[bada_bing]

Stupid question but what does this actually do?

[sensimilla]

Originally Posted by bada_bing

Stupid question but what does this actually do?

Theres no stupid questions only stupid answers.

Removes blue backgorund on transparet gifs in IE, I belive its IE that should be fixed.

[Adrian Schneider]

Originally Posted by sensimilla

Theres no stupid questions only stupid answers.

Removes blue backgorund on transparet gifs in IE, I belive its IE that should be fixed.

I thought you were going to say "... only stupid people". lol

There is a "bug?" in IE that prevents PNG transparency. This is a workaround so the images look okay. I've been using it for about a year now...

[Sin City]

excellent hack... very useful

[Scormen]

Originally Posted by sensimilla

I did everything as described and it doesnt work for me with the BBcode manager and rounded quotes hack.
https://vborg.vbsupport.ru/showthread.php?t=120073

Is it possible ? IE 6 here..

Hi,

I use that hack to, but it also does not wants to work for me..
I'm using 3.6.2

Grtzz

[Oblivion Knight]

That modification contains a lot of this type of image reference in the coding:

<td style="background-image:url();">

As mentioned in the introduction; CSS backround PNGs are not supported.

[Scormen]

Ohh okay sorry, I didn't cheked the CSS... My fault!

Thanks,
Kris

[nokturno]

excellent hack

[Ohiosweetheart]

Where, exactly, in headinclude to we place this code ??

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="clientscript/vbulletin_pngfix.js?v=$vboptions[simpleversion]"></script>
<![endif]-->