PNG transparency

How to implement PNG transparency in web designs using CSS...

can you explain how to do it, is that makes site takes increased load time?

 

Make sure the background-color property of the container element is set to transparent. After that the display will vary from browser to browser. Also remember that many older browsers don't support PNG's. The transparency of the PNG is done in the image itself.

 

If you're talking about IE6's problem with PNGs not being transparent, then yeah, you have to use some javascript file which will increase loading time (just a little, but the time will still be longer as the user will have to download more data). If you're referring to pngs in general having a bigger filesize if they're transparent, I don't think it affects them that much. The png format stores the alpha channel for every pixel even though it's fully opaque.

 

here is the code to fix the transparency issue:

<!--[if lt IE 6]>
<script type="text/javascript" src="js/unitpngfix.js"></script>
<style type="text/css">
.clearfix {height:1px;}
</style>
<![endif]-->

and then get unitpngfix from here: http://labs.unitinteractive.com/unitpngfix.php

 

Thanks a lot for the valuable reply all you friends commented.

 

use this

<!--[if lt IE 6]>
<script type="text/javascript" src="js/unitpngfix.js"></script>
<style type="text/css">
.clearfix {height:1px;}
</style>
<![endif]-->

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

Paste between head