[howto] install improved pngbehavior IE fix

[RCK]

[ How to ]

There is already one pngbehavior library included with roundcube, however, it's one very old version and it suffer of the following bugs:

• Is active on Internet Explorer 7. (stupid ressource hung as IE7 is displaying correctly png)
• Does not work on international version of Internet Explorer (French for example)
• Does not keep the original image dimensions after processing (so transparent pictures are bigger and blurred)

Here is the way to install the improved pngbehavior library into roundcube, in order to fix all those bugs:

• step1: Edit the .htaccess file and add << AddType text/x-component .htc >>
• step2: Go into the folder: skins/default/
• step3: Delete the pngbehavior.htc file
• step4: Download the Improved PNG Behavior here http://www.scss.com.au/images/pngbehavior.htc
  
• step5: Edit the pngbehavior.htc file and change << var IS_PNG = /\-trans\.png$/i; >> to << var IS_PNG = /\.png$/i; >>
• step6: Edit the pngbehavior.htc file and change << var blankSrc = '/ie7/blank.gif'; >> to << var blankSrc = 'skins/default/images/blank.gif'; >>

[ To improve - if someone can help]

The only point that could be improved now is about background transparent images (defined in CSS): pngbehavior doesn't know how to process them. (result is that folder icons are not transparents)
I have found some other libraries which can do this, but their successfull roundcube integration make the background images blank instead of transparent, and I don't know why.
Here are the lib, if someone can make them working with roundcube it would be cool.

image-background png fix:
 - http://allinthehead.com/retro/289/sleight-update-alpha-png-backgrounds-in-ie
 - http://www.reinspire.net/blog/2006/03/25/ie_transparent_pngs/

img + image-background png fix:
 - http://dsandler.org/js/ds-sleight.js
 - http://www.twinhelix.com/css/iepngfix/demo/

[Priet]

I don't understand why step 1 is needed?

step1: Edit the .htaccess file and add << AddType text/x-component .htc >>

Can you explain this?

[rosali]

Sorry for digging out this old post.

I have found a solution to fix it definitely for IE 5.5/6:

Beta Testing Area - TwinHelix

Follow the instructions in the package. Also link the js rollover (in ./skins/default/include/links.html). Comment out line 166 in iepngfix.htc and adjust the path for blank.gif.

Finally change in common.css

img
{
  behavior: url('skins/default/pngbehavior.htc');
  border:0;
}

to

img, div, li
{
  behavior: url('skins/default/iepngfix.htc');
  border:0;
}

Test here: RoundCube Webmail :: Welcome to RoundCube Webmail ... user: demo ... pass: demo

[rosali]

Forget it ... It freeze the browser when displaying certain html messages !!!