Most web designers are still using gifs due to the fact that pngs are not transparent on Internet Explorer. There are fixes throughout the internet but I have discovered a fix that does not require any CSS or HTML or JAVASCRIPT programming.
So whats the secret you ask?
First of all I have tested this in both PaintShopPro and Fireworks it may also work in other software with some tweaking.
The following steps apply to Paint Shop Pro
- When you create your png use a black background or white background, depending on the color scheme (not integral to fix).
- You can create the image using true color but it will be reduced to 256 colors when you are done.
- Be sure to flatten all your layers.
- Choose –>FILE –>EXPORT–>PNG OPTIMIZER
- Set the colors tab to Palette Base, Optimized Octree and 256 colors as in the sample below
- Colors Tab
- In the Transparency Tab choose: Single Color Transparency, Areas that match this color ( choose the color that matches your background color and a tolorence of 1 or more)
- Transparency
- In the Areas that match this color section make sure that the colorhere matches your background color and set the tolerance to 1.
- Thats it click ok and save it
- If you are viewing this page on Mozilla or Firefox you wont be able to tell the difference but in IE you can.
PNG using standard alpha method
PNG using Pallet-Based Method
If you want to use 24-bit PNG images with alpha channel transparency., unfortunately Internet Explorer contains a well documented bug that messes up the transparency of these type of images. The following is a work-around fix for this issue. The fix does require using javascript.
Create a folder and call it ‘/scripts’ in your root directory
create a file and call it fixpng.js in this folder and add the following to it.
<!–[if gte IE 5.5000]>
<script language=”JavaScript”> var ie55up = true </script>
<![endif]–>
<script language=”JavaScript”>
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? “id=’” + myImage.id + “‘ ” : “”
var imgClass = (myImage.className) ? “class=’” + myImage.className + “‘ ” : “”
var imgTitle = (myImage.title) ? “title=’” + myImage.title + “‘ ” : “title=’” + myImage.alt + “‘ ”
var imgStyle = “display:inline-block;” + myImage.style.cssText
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
strNewHTML += ” style=\”" + “width:” + myImage.width + “px; height:” + myImage.height + “px;” + imgStyle + “;”
strNewHTML += “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
strNewHTML += “(src=’” + myImage.src + “‘, sizingMethod=’scale’);\”></span>”
myImage.outerHTML = strNewHTML
}
}
<script language=”JavaScript”> var ie55up = true </script>
<![endif]–>
<script language=”JavaScript”>
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? “id=’” + myImage.id + “‘ ” : “”
var imgClass = (myImage.className) ? “class=’” + myImage.className + “‘ ” : “”
var imgTitle = (myImage.title) ? “title=’” + myImage.title + “‘ ” : “title=’” + myImage.alt + “‘ ”
var imgStyle = “display:inline-block;” + myImage.style.cssText
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
strNewHTML += ” style=\”" + “width:” + myImage.width + “px; height:” + myImage.height + “px;” + imgStyle + “;”
strNewHTML += “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
strNewHTML += “(src=’” + myImage.src + “‘, sizingMethod=’scale’);\”></span>”
myImage.outerHTML = strNewHTML
}
}
Between the <head and the </head> tags add the following:
<script language=”javascript” type=”text/javascript” src=”/scripts/fixpng.js”></script>
Now whenever you load any 24-bit png image you must add the following:
onload=”fixPNG(this)”
example: <img src=”24bitimage.png” onload=”fixPNG(this)” />
