Solución al problema con las transparencias de los PNG-24 en el Microsoft Internet explorer 5 y 6

Ya hemos hablado en este blog de la posibilidad de incluir transparencias en nuestras Webs gracias al formato PNG-24. En este Post, mostramos el modo de hacerlo y en este otro mostramos una solución al problema que se nos presenta cuando visualizamos los PNG con transparencia en el maldito Internet Explorer.

En este último Post, Bob Osola nos ofrece una buena solución para mostrar los PNG con transparencia en el Internet Explorer 5 y 6 pero tenía ciertas limitaciones como el mostrar correctamente los PNG utilizados como fondo de capa.

Aquí os dejo una solución que se presenta como definitiva y que, como poco, a mi me ha funcionado de maravilla. Este  Script nos permitirá mostrar todos los PNG con transparencia  que hayamos utilizado en el diseño de nuestra página; desde los utilizados como imagen normal <img hasta los definidos como background de determinado elemento en nuestra hoja de estilos CSS.

Se trata de iepngfix del desarrollador Freelance Angus Turnbull. Este script hace uso de los CSS Behaviors; una extensión CSS nativa de Microsoft.

Para utilizar este script es necesario disponer de dos elementos. Por un lado el archivo .htc iepngfix.htc y por otro de un gif vacio, es decir sin imagen. Ambos archivos no son suministrados en el paquete que nos ofrece el autor desde su página. Podéis descargarlos aquí.

Una vez os hayais descargado los archivos debéis ubicar el gif vacío dentro del directorio de vuestro proyecto que consideréis oportuno y definir en iepngfix.htc la ruta hacia ese archivo. Esto será lo único que tendréis que editar en el archivo .htc.

Ahora vamos a ver como usarlo. Como veréis es muy sencillo:

En la hoja de estilos general indicamos como lo hacemos de manera habitual que tal o cual elemento (en nuestro caso un div de id=”ConFondo” y las cabeceras h1) van a llevar como fondo, en este caso, unas imégenes en formato PNG, llamadas fondo.png para el div y fondoH1.png para las cabeceras h1.

div#ConFondo {

background:url(archivos/images/fondo.png) top left no-repeat;

}

h1 {

background:url(archivos/images/fondoH1.png) top left no-repeat;

}

En la hoja de estilos definida para internet Explorer incluiremos lo siguiente:

div#ConFondo, h1 {

behavior: url(archivos/js/iepngfix.htc);

}

Estaros atentos a que la ruta del archivo iepngfix.htc debe ser igual a la apuntada desde el archivo html !!! . Esto quiere decir que si, como en nuestro caso, los estilos son definidos en una hoja de estilos externa, la ruta que apunta al archivo iepngfix.htc no es la que nos llevaría desde la ubicación de nuestro CSS en archivos/css/iepngfix.htc sino desde la posición del archivo html.

http://www.twinhelix.com/css/iepngfix/iepngfix.zip

Anuncios

2 Responses to Solución al problema con las transparencias de los PNG-24 en el Microsoft Internet explorer 5 y 6

  1. […] Problemas: Internet Explorer 6 y transparencias PNG-24 en background-image La solución a lo expuesto en este antiguo Post la podéis encontrar aquí. […]

  2. Han Taiwa dice:

    Gracias por el aporte y me funciona OK! it’s very cool!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: