Note: there now is a module for this, PNG Fix.

In a recent project, we really needed to use transparent images for the logo and some background images. We wanted to avoid javascript solutions (in case the user had disabled it) and CSS hacks. We began searching for a better solution and located a php solution at http://koivi.com/ie-png-transparency. Some more searching on Drupal located a post, www.drupal.org/node/45585, and we contacted mfredrickson about collaborating on a module to provide this functionality. After a few emails it was obvious that the time required to build a module was not worth the short life to IE7. We started looking for a simpler way to implement this solution into Drupal.

Some quick modifications and tests provided good results for a quick and dirty implementation of the Koivi solution, but only for foreground transparent png's. Background png's in the CSS were not being corrected for IE5 or IE6. We are still working on the background image solution and will update this book page when we have it working. But as good luck would have it, for this project, the site appearance was acceptable to the client in IE5 & IE6 and pleasing in more standards compliant browsers. You can view the live png transparencies at www.qualstaffrm.com. The logo is a foreground image and the header and footer contain background transparent png's. Seeing the displayed results in Firefox and IE are interesting.

Here's how we did it in Drupal 4.7.4 using the Bluemarine theme as a base:

  1. copy the contents of the bluemarine theme directory to a new directory of your choice (mytheme)

    2. >

  2. download the Full Source zip file from Koivi.com
  3. unzip the file and copy the 'replacePngTags.php' and 'spacer.png' files into your themes directory (mytheme)
  4. modify the page.tpl.php file in your 'mytheme' directory:
    add this one line to top of the file, before the DOCTYPE statement 
          <?php ob_start(); ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    and add these four lines to the end of the file, after the closing html tag

          </html>
      <?php
        include_once 'replacePngTags.php';
        echo replacePngTags(ob_get_clean());
      ?>
  5. modify the style.css file in your 'mytheme' diredory:
    locate the '#logo img' style 
          #logo img {
        float: left;
        padding: 0em 1.0em 0em 1em;
        border: 0;
      }

    modify the padding specification to zero and add the margin specification to desired results

          #logo img {
        float: left;
        margin: 0 1em;
        padding: 0;
        border: 0;
      }
    we discovered that the image replacement process included any padding values in the size of the final image, possibly displaying a distorted image. declaring padding as zero and using margin to provide spacing around the image prevents any image distortion and provides the desired appearance.

A big 'Thank You' and kudos to Justin at http://koivi.com. More details and updates can be found on that site.

Comments

Veggieryan’s picture

Veggieryan commented

This is for alpha transparency only. this is good for translucent backgrounds in css that give depth when placed over lower css backgrounds..
see the nicemenu in the header of www.kopaliorganics.com for an example.

in your css, its very simple
#left-sidebar {
background:url(translucentgrey50.png) repeat;
filter: alpha(opacity=50);
}

again this is for alpha transparency. make sure you are using an alpha transparent .png so it loads in all browsers other than ie6.

ie6 would normally load the alpha .png as an ugly grey.. with the filter it comes out translucent as intended.

for standard transparency in css backgrounds I think .gif is the only solution for ie6, but this shows some hope...
will experiment...
http://www.evolt.org/node/60298
http://homepage.ntlworld.com/bobosola/
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
------------------------------
Ryan Grace Webdev&design
I do drupal sites for less and will walk you through it...
www.thefractal.org to see my work and resume.

dan90’s picture

dan90 commented

John Handelaar's theme, Fern, does a nice job of enabling transparency with javascript in a seemingly portable way for IE5&6, using Dean Edwards' IE compatibility library... - http://dean.edwards.name/IE7/

It's an approach that will only work for themes methinks - looks like you need to name the image files to end in -trans.png or something

Veggieryan’s picture

Veggieryan commented

WOW!
it works! it works! true alpha transparency in ie6! whew!
a few caveats: the filename has to end with -trans.png, you can't repeat the background or position it..... meh... I can work around that...
also, be sure to put the ie7 folder at the root of your drupal install or point the location in the head of page.tpl.php to point to it correctly.
from http://dean.edwards.name/IE7/notes/#PNG

PNG Transparency

IE7’s PNG solution is basically an inclusion of Erik Arvidsson’s nifty PNG Behavior.

My solution differs slightly in that it applies the hack directly to the style sheet. IE7 will also watch property changes (if you want to use PNG images for rollovers).

To avoid loading an empty image from the server (required by all PNG hacks), IE7 creates an x-bitmap in memory:

var NULL = "javascript:'#define x_width 1\\n#define x_height 1\\nstatic char x_bits[]={0x00}'";

It is important to understand how this solution works when applied as a background image. The solution relies on Microsoft’s filter property. This provides Explorer with visual effects not normally provided by standard HTML.

To achieve these visual effects Explorer creates a supra layer on the browser window. Now this is all guess-work of course but a noticeable affect is, that if an element has a PNG background, then none of its child elements will receive mouse events. Killing "hovers" and the like.

Because a filter is not a real background image, it cannot be offset using background-position nor can it be tiled using background-repeat.

Module: ie7-graphics.js

------------------------------
Ryan Grace Webdev&design
I do drupal sites for less and will walk you through it...
www.thefractal.org to see my work and resume.

Matt B’s picture

Matt B
Primary language English
commented

I had a lot of trouble getting the logo displayed on Garland. My solution assumes that the logo is the only alpha transparency png - therefore I did not want to parse the whole page as this solution suggests. You do need to have spacer.png at the root of your site.

I have a 61px wide and 62px high logo. If you have a different size logo you may need to tweak the styles a bit

In the page.tpl.php replace the contents of 

if ($logo || $site_title) {
...
}

with

if ($logo || $site_title) {
	print '<h1>';
	
	// make sure that we are only replacing PNG logo for the Windows versions of Internet
	// Explorer 5.5+
	$msie='/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
	if( !isset($_SERVER['HTTP_USER_AGENT']) ||
		!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
		preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])) {
		print '<a href="'. check_url($base_path) .'" title="'. $site_title .'">';
		if ($logo) {
			print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
		}

	} else {
		if ($logo) print '<span style="position: relative><!-- MSIE Alpha Transparency work around - not needed on decent browsers -->';
		print '<a href="'. check_url($base_path) .'" title="'. $site_title .'">';
		if ($logo) print '<img src="' .  base_path() . path_to_theme() . '/spacer.png" style="position: absolute; top: -20px; width: 61px; height: 62px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' . check_url($logo) . '\', sizingMethod=image);" alt="'. $site_title .'" id="logo" /></a></span><a style="padding-left: 81px" href="'. check_url($base_path) .'" title="'. $site_title .'">';
	}

	print $site_html .'</a></h1>';
}
devman’s picture

devman commented

Thanks Matt!.

This is a slight variation on the above based on the multiflex37 theme. The spacer.gif is a 1x1 px transparent gif. It is in this themes directory in this case although could be moved to the root as Matt suggests, if using this method in multiple themes. Just drop the $path_to_theme/img in the filter. Did not find a need to pop in a span (site/theme specific?) or add the image size as it was using the image itself to size it. Also, the filter has another parameter for enabling. The default is true, but it is included here.

        <!-- Sitelogo and sitename -->
        <?php
         $site_name = check_plain($site_name);
         $base_path = check_url($base_path);
         $logo = check_url($logo);
		 $path_to_theme = path_to_theme();

		 $msie='/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
		if( !isset($_SERVER['HTTP_USER_AGENT']) ||
			!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
			preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])) {
		   if ( $logo) { /* changed check for both site_name and logo to each individually */
			print "
		    <a class=\"sitelogo\" href=\"$base_path\" title=\"$site_name\"> <img src=\"$logo\" alt=\"$site_name\" id=\"logo\" /> </a>";
		    }
		}else {  /*MSIE Alpha Transparency work around - not needed on decent browsers --> */
			if ( $logo) { 
                print "
	        <a class=\"sitelogo\" href=\"$base_path\" title=\"$site_name\"> <img src=\"$path_to_theme/img/spacer.gif\" style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=$logo, sizingMethod=image)\">
			</a>";
			}
		}
          print "
        <div class=\"sitename\">";
          print "
          <h1><a href=\"$base_path\" title=\"$site_name\">$site_name</a></h1>
        </div>";
        ?>
alienresident’s picture

alienresident commented

I would add a the alphaImageLoader code in the #logo image class in an IE only stylesheet (using conditional comments). That way it is degrades gracefully doesn't mess up your page.tpl.php code.

The better solution is suggestion is to use PNG8 rather than PNG32 for your transparencies. You have to use Fireworks rather than Photoshop to get this to work properly. As Fireworks supports alpha transparency in PNG8 and Photoshop only supports index transparency (i.e. same as GIF transparency) See this article for more detail:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

More hassle but this has TWO significant advantages: smaller file sizes, and you don’t need to use the IE6 alpha filter. IE6 treats it like a PNG8/GIF index transparency - it just doesn’t show the alpha transparency, no ugly boxes. The AlphaImageLoader Filter is not standard and is very intensive so it slows down IE6, because it is called for each single PNG image. Again this way your site degrades gracefully. You don’t need to worry about removing the filter when IE6 finally dies. I use PNG8 for all my transparent images.

elliotttt’s picture

elliotttt commented

Just tried the original method in Drupal 5.7 using a custom sub-theme for zen, and it worked great, except that it initially had a missing image symbol on ie6. I noticed it was looking in the files folder for the spacer file, so I moved it there, and then it worked perfectly. You could probably also change where it looks for that to the theme/subtheme folder.

maddy28j’s picture

maddy28j commented

I haven’t been able to get this method to work with repeating backgrounds yet. An obvious example would be if you wanted a shadow down either side of a centered design. The ideal way would be to cut a small image (maybe 1px high) and then repeat it vertically. My solution was to just create a larger/extended .png file which covers the whole repeating area. Whilst this solution isn’t perfect, it’s certainly not terrible either. Even though we are making a large (in dimensions) file, because it is mostly transparent the actual file size will remain relatively small, and it certainly looks a lot better than an IE6 mess!
Eating Disorder

malim’s picture

malim commented

I recently redesigned my website www.diolt.com where i am using Esyndicat php script, and it also has png error on IE 6. Will this script work with my website?

sibopa’s picture

sibopa commented

The solution with PNG8 worked very good for me; and so simple, no need for additional configuration of whatever.
Just like he suggested, create your png image with fireworks, and you will be ok.

Thanks again