Transparent PNG in IE5 & IE6
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:
- copy the contents of the bluemarine theme directory to a new directory of your choice (mytheme)
- download the Full Source zip file from Koivi.com
- unzip the file and copy the 'replacePngTags.php' and 'spacer.png' files into your themes directory (mytheme)
- 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());
?>
- 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.
try this...
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.
javascript solution
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.pngor somethingholy cow!
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.
My solution for a transparent logo on 5.1 and Garland
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>';
}
Variation on AlphaImageLoader
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>";
?>
For Drupal 5
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.