PNG y sus transparencias en IE

De muchos es sabido que el IE no trabaja bien las transparencias de los archivos PNG que las contengan, esta es una de las tantas fallas del IE, pero pues todo tiene solucion y esta es algo facil de implementar y corregir, existen PNG's que podemos usar como imagenes dentro de la pagina o bien como fondos, para ambos casos tenemos las mismas opciones

1. Usar GIF's aunque perdamos calidad
2. Utilizar otro navegador como el Mozilla Firefox y tirar el IE a la basura
3. Implementar un pequeño script para solucionar esta falla

Para la opcion 1 pues habria que tener en cuenta que el archivo GIF no te dara la calidad de los PNG's, ademas de que estos solo soportan un canal de transparencia, por lo que no podrias hacer degradados transparentes.

Para la segunda pues que mas quisieramos los diseñadores que pudiera tomarse como una opcion, en realidad hay mucha gente que usa el navegador que viene con su sistema operativo y no le interesa probar algun otro por mejor que pueda ser, asi que por lo pronto optaremos por la tercera opcion.

Este script lo que hace es que si el navegador es el IE aplique a los PNG automaticamente un filtro Alpha para las transparencias, como comento arriba, no hay mas que hacer mas que pegar esto, el script lo hace todo solo :-D

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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 + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->


Otra de las opciones de uso de un PNG es para fondos, esto se puede solucionar con lo siguiente entre las etiquetas head:

<style type="text/css">
<!--
#fondo {
background-image:url(logoGDE.png)
}
* html #fondo {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logoGDE.png', sizingMethod='crop')
background:;
}

-->
</style>

* html Esto hace que se ponga un fondo para unos navegadores y ese mismo con un filtro al IE

Hay que cambiar logoGDE.png por la imagen de fondo que vamos a usar

En la tabla se pone id="fondo" yo lo puse en una tabla, si se pone en la etiqueta <table> y la tabla tiene bordes sobrepondra la imagen a los bordes, si se pone en el <td> no.

Probado en: Firefox 1.5 Opera 8.54 IE 6

De esto se puede ver un ejemplo en www.cristovivo.com/prueba.html que a lo mejor no es la mas estetica pero muestra lo anterior

Espero les sirva ademas de que tambien espero sus comentarios al respecto, esta es una de las grandes preguntas que siempre rondan en los foros.