Gone are the days of attempting to hodge podge a transparent gif, in an attempt to match the “matte” of the gif in photoshop to the color of the background in your page. The only way to achieve transparency is with a PNG. You will see a dramatically higher level of clarity with png, allowing for near freedom; dropshadows, fonts, gradients are all handled fairly well with png.
What’s the Problem?
The problem however is that IE 6 definitively does NOT support transparent images. I think Firefox has been supporting it since the ice ages, and probably earlier. So, I can’t use transprent png’s??
The Solution
Thanks to Twin Helix (Angus Turnbull)’s IE PNG Fix, we can now use transparent images wherever we want, AND it supports transparent background images! TO NOTE: There are other IE PNG Fixes, but we found them to be either: too obtrusive, or not supporting background images, (this also includes our old favorite sleight).
How to Use It
Implementation is just a few steps and doesn’t require long lines of css or javascript code. Get the full directions here. Simply include the attached .htc file, blank 1×1px gif, and one quick line of CSS:
img, div { _behavior: url(scripts/iepngfix.php) }
** PLEASE NOTE: We found that the original script (which does not include an underscore), caused CSS Warnings in Firefox, so the addition of the underscore hides the declaration from Firefox and applies to IE Only.
In this case, we are applying the transparent png support to all images, and divs, you can use it for any elements you wish.
Known Issues
Being a bug fix, there are some known issues. For example:
- Child links of absolutely positioned elements cannot be clicked. There is a workaround for this, but not a full solution.
- z-index issues: when positioning dynamic elements (e.g. a dropdown navigation), images affected by the script will always appear in front of the absolutely positioned elements. Working on a solution..
UPDATE
I know it’s pretty early for an update, as we just published this, but moving on…
Anyway, as this uses the CSS code above to implement the png fix, we would advise a specific class just for the fix which is applied on a case by case basis. That way you can apply the fix only when needed, speeding up load time and preventing any javascript or css confusion. For example:
.pngfix { _behavior: url(scripts/iepngfix.php) }
Alright have fun, and feel free to buy me a beer.
