By brandoncolorado on

Hi Everyone,

I have a site here.
http://drupal.theamericanmoderate.com

I have replaced the logo with a different png. Of course, I am having alpha transparency issues because IE is lame. Anyways... I read in other posts that I should include the pngfix.js and I have done that. I pointed to it correctly. Anyways, it is a png 8, and in Internet Explorer you can't even see the image (you can kind of see the letters), but in firefox it is perfect. I tried using a gif, and had similar problems. This should be easy...but for me its not. I used Fireworks to make the image.

Thanks for any help!

⋅ Categories: Drupal 4.6.x

Comments

paddy_deburca’s picture

paddy_deburca commented

I had a similar issue - I wanted to create a glow effect - worked perfectly in PNG on FF - but everywhere else it was a disaster.

I modified my image - included the background - flatteded the image - saved. It now it works perfectly on all browsers.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

brandoncolorado’s picture

brandoncolorado commented

I tried that, and I get different shades of blue for the two browsers. Seems they are reading the hex differently.

paddy_deburca’s picture

paddy_deburca commented

The different browsers should read the hex of the banner and the hex of the logo as the same if they are both PNG, JPEG for GIF images.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

regx’s picture

regx commented

This works for me in Drupal 4.7 ( I am thinking of creating a module to handle this issue)

1. Download pngbehavior from: http://www.scss.com.au/images/pngbehavior.htc

2. upload a transparent 1x1 pixel gif called blank.gif to your theme I put mine in themes/bluemarine/images/blank.gif
Note: having non alphanumeric text in your theme dir name can cause problems

3. in pngbehavior.htc edit:
(line 7) to point to blank.gif

var blankSrc = "/site/themes/bluemarine/images/blank.gif";

and
(line 42) to use the image sizing method

      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='image')";

4. Add the following to the top of your style.css

/* Handle PNGs in IE */
img, input{
   behavior: url("/site/themes/bluemarine/pngbehavior.htc");
}

That should do the trick!
I do not think this method handles stylesheet images correctly, but will handle all images placed in any of the theme.php files, php files in site content, the logo etc.

If you really need css placed images to work, let me know.
Also, you can find more information on PNG images in IE here
http://www.scss.com.au/family/andrew/webdesign/pngbehavior/
and the reference for alphaimageloader here
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha...

My personal Drupal site.
http://www.regx.dgswa.com/html/index.php

gonzalo.koeln’s picture

gonzalo.koeln commented

Thanks regx for your post. I tested your code with different Drupal themes and it is working great!

There is another script called pngfix.js around that didn't do the job for me. I was using a slightly modified FriendsElectric theme , but pngfix.js was just working sometimes. This is maybe because FriendsElectric is a tableless theme, but I'm not really sure.

Please use this fix for the PNG IE flaw.