Si tienes algunos conocimientos de webmaster, sabrás que cada navegador (IE, Firefox, Netscape, etc.) materializa las páginas web a su manera. Normalmente, siguen unos estándares y por eso la mayoría de las páginas web tienen la misma apariencia en todos.

Todos tienen algunos errores, y al diseñar una página web debes intentar que sea lo más neutral posible para que ningún navegador tenga problemas al cargar la página. Internet Explorer 6 es todavía uno de los navegadores más utilizados, y también uno de los que más errores contienen.

Uno de los errores más comunes, es que no consigue cargar la transparencia en los archivos .PNG, por lo que si tenemos un diseño de una página web con bordes (por ejemplo) redondeados o con sombra con el borde transparente para que no contraste con el fondo de la web, veremos como IE6 se inventa un bonito fondo que nos arruina la sombra o cualquier cosa que sea.

Para arreglar este gran error, los programadores de esta aplicación decidieron crear un filtro para este tipo de imágenes, que aplicado con Javascript o CSS en una página web, permite cargar los .PNG transparentes adecuadamente. El filtro es el siguiente:

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader()

Como este filtro solo vale para IE6, hay que avisar a los demás navegadores de que no lo carguen, así que nuestro código, en este caso para CSS, quedaría así:

background-image: url(’imagen/bordetransparente.png’) !important;
background-image: none;


filter: none !important;


filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/bordetransparente.png’);

Debes tener en cuenta que la dirección de la imagen, “src“, tiene que estar introducida desde la raíz de tu página web. A este filtro también puedes añadirle la característica “sizingMethod“, si la imagen de fondo es más grande que el objeto que tiene la clase de CSS, puedes cortar la imagen con “sizingMethod=crop“, o expandirla hasta los límites del objeto “sizingMethod=scale“, si la quieres normal, simplemente omite este atributo. Usándolo quedaría de la siguiente forma:

background-image: url(’imagen/bordetransparente.png’) !important;
background-image: none;


filter: none !important;


filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scaled’, src=’imagen/bordetransparente.png’);

Espero que os sea de ayuda, a mí en su momento me salvó…

Esta entrada fue publicada el 5 Octubre 2007 a las 1:12 AM y fue archivada en CSS. Puedes escribir un comentario, o trackback desde tu sitio web.