gustavo

If you are using IE5.5 or later on Windows, you will notice that .png image files with any transparency look just plain horrible. That is because, Microsoft in its wisdom, did not include support for alpha transparency in these versions of IE.

Ok, so what are your options?
You could use a .gif or .jpg instead. This is the easiest of your options.

Or, you could use IE's support for the AlphaImageLoader filter.
http://support.microsoft.com/default...b;en-us;294714
or, a javascript workaround.

There is also a good Javascript solution here: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Details of the various options are shown in this article at A List Apart

Yet another method, is to use alpha transparent png graphics in your basic css file, and override them with index-transparent gifs for IE in another css file. You would use a conditional statement to call that second, IE-only css file.



Which is the best?
Each workaround has pros and cons.
Making your image into a .gif is the easiest, but .gifs do not give you the same levels of control over your transparency (no alpha transparency, no degrees of transparency) and file sizes are usually larger for essentially the same image. BUT, all browsers support .gifs.

Using the AlphaImageLoader filter will result in your css not validating. IE recognises it, but other browsers don't and there have been reports of some problems with other, non-IE browsers.

Javascript is better than using the AlphaImageLoader filter, BUT adding more Javascript to your site does increase loading times and not everyone enables js in their browser.

My Recommendation:
If you really must use a transparent .png image file, then I recommend the Javascript solution from the site in the link above. The solution carries minimal overhead, requires very little additional code to be added to your template's index.php, and the workaround works well across all browsers because it is called from a conditional statement so that only IE sees it. The conditional statement they use is also future-proof as it states, "if less than IE7, then..."

I hope you find this useful.

gustavo

This works well and avoids the use of javascript, instead relying on the AlphaImageLoader and using a conditional statement so it is used only by IE (less than IE7) ...

Below is the css based on the background image of a DIV tag with ID png_background.

Roberto Armengual

Entrega en en un maximo de 48 hrs. (es una exageracion pero para no errar.)

Roberto Armengual

Si usas internet explorer 5.5 o superior en windows, notaras que que las imagenes con extension .png con transparencias lucen horribles. Esto es porque Microsoft su gran "sabiduria", no incluyo soporte para transparencias alpha en esas versiones de Internet Explorer.

Entonces, que opciones tenemos?
Podrias usar imagenes .gif o .jpg, esta es la opcion mas sencilla.

O podrias usar un soporte de internet explorer para el filtro AlphaImageLoader
http://support.microsoft.com/default...b;en-us;294714
o, un javascript workaround.

Hay también una buena solución Javascript aqui: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Los detalles de los metodos son mostrados en dicho articulo en el apartado A de la lista.

Otro metodo es usar graficos png con transparencias alpha en tu archivo de css, y sobreescribirlo con transparecias-index gifs para IE en otro archivo css. Puedes usar una declaración condicional para llamar un segundo, unicamente archivos css IE.


Código PHP:
<!--[if lte IE 7]> <link href="http://sitename.com/templates/css/ie6.css" type="text/css" rel="stylesheet" media="all"/> <![endif]-->

Cual es el mejor metodo?
Cada uno tiene sus pros y sus contras
Convertir tus imagenes a .gif es lo mas sencillo, pero los gifs no brindan los mismo niveles de control sobre tus transparencias (no hay transparencias alpha, no hay grados de transparencias) y el tamaño de los archivos es usualmente mayor. PERO, todos los navegadores soportan gifs.

Usar el filtro AlphaImageLoader hara que tu css no sea valido. Internet Explorer lo reconoce, pero otros navegadores no, ademas hay reportes de algunos problemas con otros navegadores.

El metodo del Javascript es mejor que usar el filtro AlphaimageLoader, PERO añadir mas Scripts a tu sitio incrementa el tiempo de carga, ademas de que algunos deahabilitan los Scripts en sus navegadores.

Mi recomendación:
Si de verdad necesitas usar archivos png con transparencias entonces te recomiendo la solucion del Script de Java desde el link de arriba. Esta solución lleva minimos ¿?, require poco codigo adicional al index.php de tu template, y el ¿entorno de trabajo? trabaja bien en todos los navegadores porque es llamado desde una declaración condicional que solo internet explorer ve. La declaracion condicional que usan es tambien para todas la versiones, "si es menor que Internet Explorer /, entonces.."

Espero que te sea de utilidad.