Trasparencias PNG para IE6

A estas alturas no deja de rondarnos la posibilidad de que uno o muchos usuarios naveguen a través de IE6 o menor con lo que nos desbarata las incríbles posibilidades de diseñar sin miedo a las trasparencias a través de PNG. Sin embargo javaScript + CSS vienen para salvarnos y nos dan la llave para superar el impase. El filtro que nos permite visualizar sin problemas trasparencias PNG en IE6 nos dará la tranquilidad de no recibir con exaltación la llamada de un cliente airado porque los gráficos de su web se ven con bloques blanquecinos sobre los fondos. Otra ventaja es que valida para XHTML y CSS, cumpliendo con los standares.

Utilizando un div id tenemos:

#filter_bann {
 width: 644px;
 height: 243px;
 background-image: url(“banner_1.png”) !important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/banner_1.png’);
}

” El ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no.

La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacío (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacío (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s.

Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raíz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta). “

Para ver el resultado »

La anterior reseña a través de csslab.cl

~ por sinscroll en febrero 26, 2009.

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: