Transparency PNG pictures with Internet Explorer 6 (server-side solution)

[cclaerhout]

Purpose
Kill the grey backdrop of transparency PNG images in Internet Explorer 6 (server-side solution)
Thanks to Natch (https://vborg.vbsupport.ru/showthread.php?t=67413) and d00d (http://koivi.com/ie-png-transparency/)

Version of Koivi's script
2.0.12

Update
10/01/2006 : detect MSIE to ignore IE7 or greater

Installation
1)Edit the xml file, update line 8 with your information :
$img_path='http://www.websitedirectory.com/forumdirectory/images/'
AND save.

2)Import xml file with Plugin Manager.

3)Copy "spacer.png" picture to vbulletin images directory.

Information
-Sometimes (it depends) you will have to specify the height and the width of the png picture, otherwise, it won't work. Don't hesitate to go to d00d website he often update his code.
- When a link is above a png background, it will not work !
Works now ! thanks to Holger R?prich of "www.indesigns.de".
Go and see the solution here. (https://vborg.vbsupport.ru/showpost.php?p=763801&postcount=17)
-With this extension, png pictures with vB collapse system don't work (under IE of course). P.S : even after having edited vbulletin_global.js

[theArchitect]

Fantastic. This is will come in most handy.

[sirbutts]

Fantastic. This is will come in most handy.

Beware this poses a heavy load on your server...

[theArchitect]

Beware this poses a heavy load on your server...

That is not so good. Though the sites I have in mind for this use very little traffic. So it should be ok.

But I will bear your warning in mind for the larger traffic sites.

[Natch]

Beware this poses a heavy load on your server...

I don't see the load issue you are talking about: it's not doing any image manipulation, just text replacement using a low-intensity str_replace()...

If this is a problem, then you should also turn off BBCODE processing, as that is far more intensive than this.

Note: this code does not and never has (or will) process PNG files linked in external CSS files, only in inline CSS (either within <style type="text/css"> tags or <div style="this-style: type;">)...

HTH, and GJ cclaerhout

[Boofo]

Hello stranger! ;)

[cclaerhout]

I don't see the load issue you are talking about: it's not doing any image manipulation, just text replacement using a low-intensity str_replace()...

If this is a problem, then you should also turn off BBCODE processing, as that is far more intensive than this.

Note: this code does not and never has (or will) process PNG files linked in external CSS files, only in inline CSS (either within <style type="text/css"> tags or <div style="this-style: type;">)...

HTH, and GJ cclaerhout

Happy to see you again Natch :)

[cclaerhout]

Little precision from Justin Koivisto himself :


It's another bug with MSIE where for some reason when you use the
alpha filter, it places the image on top of everything, even though it
all appears correctly.

It means if a link is above a png background, it will not work !

[cclaerhout]

Information :
With this extension, png pictures with vB collapse system don't work (under IE of course).
P.S : even after having edited vbulletin_global.js

[Johannes de Le?n]

I use pngfix, it is much easier, and works great.

You can get it here (http://homepage.ntlworld.com/bobosola/pngfix.js).

Then just put this in the headinclude template:
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="path/to/pngfix.js"></script>
<![endif]-->

[cclaerhout]

I use pngfix, it is much easier, and works great.

You can get it here (http://homepage.ntlworld.com/bobosola/pngfix.js).

Then just put this in the headinclude template:
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="path/to/pngfix.js"></script>
<![endif]-->

I don't like this method eventhough i've suggested it here :
https://vborg.vbsupport.ru/showthread.php?t=77465

Why ?
1)It's not a sever side solution but a client side solution and i find it a lot slower on old compruters.
2)It's javascript.
3)It doesn't work with background pictures.

[Bad Bunny]

Fantastic. This is will come in most handy.

I installed this, and it works great. Thanks!

[GrendelKhan{TSU]

er...sorry for the stupid question...but I installed it...

but how do you know if its working?

:ermm:

[Bad Bunny]

er...sorry for the stupid question...but I installed it...

but how do you know if its working?

:ermm:

Use Internet Explorer for windows. Use PNGs that have gradient transparency. If there is a grey box around it, something is wrong.

[cclaerhout]

er...sorry for the stupid question...but I installed it...

but how do you know if its working?

:ermm:

You just have to use a png picture inside the code of vBulletin.
Try this hack : https://vborg.vbsupport.ru/showthread.php?goto=newpost&t=94430 :-)

I'm working on a png bbcode to use png (with transparency) in threads. Width and height will have to be specified.

[cclaerhout]

Xml file updated with version of Koivi's script 2.0.11.

UPDATE: (8/4/2005): There was a missing comma in the filter that caused MSIE 5.5 (6 was ok) to not render some background images. Thanks to Pierre Lemieux for reporting this!

Good news : there is may be a solution to make work a link above a png background.

[cclaerhout]

there is may be a solution to make work a link above a png background.

Tested and approved :

Go to "All style options", then in "Additional CSS Definitions"
add :
*a {position:relative;}

And that works !
Thanks to Holger R?prich of www.indesigns.de

[cclaerhout]

Tested and approved :

Go to "All style options", then in "Additional CSS Definitions"
add :
*a {position:relative;}

And that works !
Thanks to Holger R?prich of www.indesigns.de

Warning : don't use *a {position:relative;} with vbshout or it will cause a bug !

Instead, just add a style to your link

style="position:relative;"

[Avalon111]

works like a charm!
thanks!!!

[TygerTyger]

This hack is only necessary for 24-bit PNG images by the way. 8-bit PNG images (single colour transparency) work fine in IE without a hack.

[weaver]

Warning : don't use *a {position:relative;} with vbshout or it will cause a bug !

Instead, just add a style to your link

style="position:relative;"

Thanks! I had the vbshout bug you mentioned.

[leokoudo]

where do I hook this plugin?

[voidet]

Hey hey,

I am having problems with using this hack.
I am running 3.5.2 and when installed non of my PNG images show up at all.

I have uploaded spacer, installed the plugin, added the link mod, and changed the width and height of my image, but still the image doesnt show up :(

What am i doing wrong :'(

[board.trash]

Hey hey,

I am having problems with using this hack.
I am running 3.5.2 and when installed non of my PNG images show up at all.

I have uploaded spacer, installed the plugin, added the link mod, and changed the width and height of my image, but still the image doesnt show up :(

What am i doing wrong :'(

same problem here :disappointed:

[350Chevy]

Warning : don't use *a {position:relative;} with vbshout or it will cause a bug !

Instead, just add a style to your link

style="position:relative;"

What do you mean by "add a style to your link"?

[evenmonkeys]

NEVERMIND

[MillerLight]

Can someone explain how to import this correctly?

[cclaerhout]

To 350Chevy :
A simple example :
<td class="tcat" width="100%" style="background-image: url('styles/lesatirique/cats/menumilieu.png');height:46px;"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]" style="position:relative;">$forum[title]</a></td>
You have a background image on a cell of a table. And into that cell you have text linked to an URL. The hack is going to put the picture above the link. To avoid this, just apply a CSS to the link : style="position:relative;"

To voidet and board.trash :
It should work. Check if the path to spacer.png file is correct.

In most of cases, you don't have to specify width and height BUT you have to use relative links. I explain :
Go to the Style Manager, choose your style and click on "GO" (All style options). Your Image Paths must also be written with relative URLs :
"/forum/directory1/directory12/butons"
AND not :
"http://www.somethingforvb.com/forum/directory1/directory12/butons"

Do the same thing into your templates. It should work.

Now if some images don't display don't use for them relative links and don't forget to specify height and width.
Exemple :
<img src="http://www.somethingforvb.com/forum/directory1/directory12/picture.png" height="46" width="22" alt=""/>

To leokoudo :
... go to your Plugin Manager and "Add New Plugin". That's all. Of course, don't forget to edit your xml file.

[cclaerhout]

Script update

[BaselineAce]

I am currently using the JS hack, which many users find too slow.

I have yet to get a straight answer as to the effect this has on the server load. I'd imagine that it's not pretty...

[tm3500]

When I install this the images disappear completely:

http://www.sierraleone.com/pngprob.jpg

Any idea what I'm doing wrong?

[cclaerhout]

When I install this the images disappear completely:

http://www.sierraleone.com/pngprob.jpg

Any idea what I'm doing wrong?

You have to precise the size (width and height) of the reply button. That's all.

[Lucas]

So this does not affect server load, correct? I have kind of a busy forum and don't want to lag the complete machine.

Regards.

[HollyRidge]

Extremely slow for pages especially when it is needed several times such as with "Png Rounded Quotes (PRQ) version 3.00 - Valid XHTML 1.0" at https://vborg.vbsupport.ru/showthread.php?t=94430 If the plugin is disabled in the plugin manager pages load normally fast. When this plugin is enabled it takes forever for pages to load.

Also to note, tried the js hack and it did not work at all. This hack did work however is extremely resource needy.

If it helps server running on is dual xeon 2.4 ghz, 1 gb ram, etc, etc. with hardly any previous load on it. The forums were also turned off with no current visitors. The reason I am adding this info is to help point out that there is a problem here with this hack.

[sandalwood]

This hack is only necessary for 24-bit PNG images by the way. 8-bit PNG images (single colour transparency) work fine in IE without a hack.

UHM, wtf is everyone ignoreing this CRITICAL comment??

solution to all your problems right there, if true. just convert your png to 8bit!!

[cclaerhout]

Well in a 8 bit png picture, you will loose the alpha transparency and the result will be similar as a gif transparency picture. If the solution was such simple, developers wouldn't spend so much time to find a way to make transparency works well with IE. Any way IE7 fixes the problem.

I don't think this hack is intensive for the server, but it is for IE on YOUR computer.

[GrendelKhan{TSU]

how do I UNinstall this?

just delete the plugin?

[cclaerhout]

Yes, that's it.

[sensimilla]

Any chance to make it work with plugin accelerator hack ?

[Avalon111]

in vb 3.6.x this modification is causing display errors of png images.
which means that in many forums pngs are NOT displayed everytime.

[leroub]

thx for this... work nice with 3.6.8... ;)

[cclaerhout]

Considering vBulletin officials attitude towards their customers & the vB community, my mods will be remove from vBulletin.org on the Friday 30th October. If after this delay you want to download one of them, just contact me.

Best regards,

Cédric Claerhout