Contenido

PNG Internet Explorer, soluciones varias

28 Ago

+ 71

Uno de los problemas con los que me encontré a la hora de hacer el diseño que ahora mismo estoy usando es el manejo de ficheros PNG trasparentes. Si lo estás viendo desde Firefox o cualquier otro problema no deberías tener ningún problema para visualizarlo, pero esto antes no era asi.

theme verde

Como no, Internet Explorer (versiones 6 y anteriores) ha tenido una serie de problemas con este tipo de ficheros, mostrandolos de forma fea y sucia, y claro sin trasparencias. Lo cual causaba un aspecto muy poco estético cuando el visitante llegaba con ese navegador.

Para solucionar este problema encontré un montón de posts y de soluciones acerca de como tratar las imagenes PNG en nuestra web.

Introducción 

La W3C presentó el 1 de Octubre de 1996 la especificación del formato PNG, un año despues del lanzamiento del primer IE y desde entonces se ha pasado esta especificación por ahi, ahora parece que por fín en la versión 7.0 (10 años despues) se acercan bastante a lo especificado por W3C.

Para solucionar esta tocada de … los chicos de M$ diseñaron un sistema de filtros de imagenes que pasó a forma parte del core del navegador desde la version 4.0, aportando nuevas mejoras y más opciones en versiones superiores.

Uno de estos filtros, es el que nos permite el correcto visionado de los ficheros PNG en Internet Explorer.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()

1) Mediante Javascript

Una de las formas de las que disponemos de tratar este bug, en IE es el uso de una librería en JS mediante la cual recorre todas las imagenes de la página y les aplica el filtro de imagen que IE  (5.5 y superiores) incorpora en su interior.

Como se trata de un javascript no válido (para todos menos IE), tendremos que prestar atención a la forma de invocar el fichero, respetando que el vistante no tiene por que encontrar un error javascript al cargar la página, solo por entrar con otro navegador.

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

De esta forma indicamos que si el navegador es una versión anterior de IE a la 7, incluye este fichero sinó no lo hagas. Para ello es imprescindible disponer del fichero pngfix.js.

2) Mediante CSS

En el metodo 1, tenemos controladas todas las imagenes que hemos insertado en nuestro HTML, pero no las que hemos definido en nuestro CSS. Por ese motivo tenemos que hacer una modificación más, pero esta vez en los ficheros CSS. Este lenguaje es menos exigente a nivel de ejecución por lo tante si no reconoce una sentencia simplemente la salta, no soy partidario de crear CSS no válidas o parcheadas, pero es que gracias a M$ tenemos que hacerlo…

Para ello tendremos que añadir el mismo filtro pero a mano, para ello definiremos las siguientes líneas:

 background-image: url(”trasparente.png”)!important;  
 background-image: none;  
 filter: none !important;  
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/”trasparente.png’);

Es importante tener en cuenta que el atributo src del filtro progid:DXImageTransform.Microsoft.AlphaImageLoader debe de ser la ruta absoluta con respecto a nuestra página de inicio. En un wordpress, hay que partir desde la raiz del blog.

Estas líneas no son más que un cúmulo de parches para que los navegadores reconozcan lo que deben y hagan su misión de la mejor forma. Por ejemplo, IE no reconoce la sentencia !important por tanto saltará esta línea, en cambio Firefox (por ejemplo) si que la reconoce y la acatará.

Más Información

  • Hola,
    Estoy tratando de solucionar el problema de los PNGs en un blog (WP). Pero no me aclaro…

    He añadido las lineas del apartado 2 en el CSS…

    
    	background:#968b75 url("./images/header.png") 0 no-repeat !important;
    	background-position:center;	
            background-image: none;
    	filter: none !important;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./images/header.png’);
    

    Pero…

    1) En Firefox la imagen no se centra
    2) En IE la imagen header.png ni aparece

    ¿También tengo que añadir las lineas?

    
    <!--[if lt IE 7.]>-->
    

    ¿En donde? ¿En el index.php de WP?

    Madre mía cuánta pérdida de tiempo para hacer que las cosas se vean bien en todos los navegadores. ¡Qué duro es el cross-browsing!

    Saludos.

  • Buenas Jota, a ver.

    1) Las rutas del filter deben ser absolutas.

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/wp-content/themes/TEMA/images/header.png’);

    Asi se soluciona el problema 2 de tu pregunta.

    2) Para hacer que se centre, añade al final del filter, la sentencia para centrarlo.
    background-position: center;

    Con eso debería ir, y si tio, es una mierda cross-browsing… pero es lo que hay….

  • Gracias… Ya me había salido la imagen al poner la ruta absoluta.

    Ahora lo que no tengo en IE es el fondo del color: background:#968b75.

    O me sale el color del fondo o el PNG «transparente»… Pero no las dos cosas a la vez…

    Ufff…

  • Hola, estoy tratando de modificar el theme Black Minimalism para preparar mi blog y no logro hacer que mis pngs sean transparentes en ie 6

    Realmente no se como poder aplicarlas dentro del wordpress, en un sitio html es facil pero en wordpress soy nuevo y estoy tratando de averiguar como hacerlo.

    si me puedes dar una mano lo agradeceria, mi correo es lifekillz @ gmail.com

    salu2

    cristian

  • Tengo un problema gravisimo utilizando el filtro alpha de IE

    La pagina que estoy haciendo esta solo hecha con divs

    el div principal tiene una imagen de fondo que debe tener transparencia, al momento de incorporarle la transparencia usando

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=’true’, src=’../images/sombra.png’, sizingMethod=’scale’);

    me anula todos los links que tiene es div principal, al comentarle la linea anterior , los links vuelven a aparecer

    Podría alguien decirme de que forma solucionarlos

    gracias

  • Buenas Guido, el div con la imagen transparente no estará encima de los enlaces ¿no?

  • El div principal no tiene style de posición ni adsoluta ni relativa, solo se me ve mal en Ie al prender el filtro en FireFox los links aparecen perfectamente

  • Ahora que lo dices, yo tambien tengo ese problema con la publicidad en esta web. Desde FF si que se puede clickar, pero desde IE no.

    Quizas tenga algo que ver. Esta noche le echaré un vistazo.

  • ya probe de todas formas, quizás exista alguna otra propiedad de AlphaImageLoader aparte de sizingmethod
    me parece que voy a optar por sacarle el AlphaImageLoader a ese div. porque si el filter se lo pones directamente al tag funciona todo correcto

  • te envio aca un link con la posible solución, saludos y gracias

    http://www.tripix.net/?p=36

  • funciona, todos los divs que esten adentro del que tiene el filter ponele posicion:relative; y listo funciona perfecto, no genera ningun problema

  • Hola, que coincidencia, me he pasado todo el dia intentando solucionar el problema de las transparencias en PNG con esta misma theme de WordPress, sin mucho exito, tristemente

    Tras unas cuantas peleas he conseguido mostrar correctamente «layout_top.png» en IE usando el truco de AlphaImageLoader, pero no el resto de los «background» pngs, como «layout_middle.png» (repeat-y, aarrg).

    que solucion (.js, css modificado, php?…) has encontrado para hacer funcionar completamente la theme en IE? estaria muy agradecido si pudieses postear el procedimiento o mandarme un mail

  • Buenas VictorS, he usado exactamente lo mismo que arriba.

    El problema con repeat-y lo puedes hacer despues, con un background-repeat:repeat-y;

    Por ejemplo:

    
    #page {
    	text-align: left;
    	margin: 0px auto;
    	/* The entire template's width is set in this class. */
    	width: 719px;
    	_width: 719px;
    	background-image: url("images/layout_middle.png")!important; 
    	background-image: none; 
    	filter: none !important; 
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/themes/black-minimalism-10/images/layout_middle.png', sizingMethod="scale"); 
    	background-repeat:repeat-y;
    	}
    

    Aunque antes de seguir tendrías que leerte esto y esto, ya que esto ocasiona un error grave en los enlaces de dentro de los divx con imagenes (que en el theme son todos).

    Estoy intentando explicarlo en un post, pero ando un poco liado.

    Un saludo

  • Un mar de dudas:
    Tengo el mismo problema con el I6 pero mis dudas son:
    * ¿En que pagina php se mete el siguiente codigo javascript?

    <!--[if lt IE 7.]-->

    ¿El javascript se mete en la carpeta js de mi theme no?

    /davma.net/wp-content/themes/themaA2nieto/js/

    * Si por lo contrario decido hacerlo por css, ¿en que parte del css se mete dichas lineas?

    gracias

  • Buenas set.
    * En la página donde se llaman los JS, generalmente es el header.php.

    * El javascript lo puede meter donde quieras, únicamente tendrás informa de la ruta donde está alojado en la llamada del header.php.

    * Hacerlo por CSS, que son dos cosas distintas ya que el caso de JS es para las imagenes que incluyas en tus posts, y mediante CSS son para la estructura.

    Debes ponerlo en todas las clases y ID’s que contengan los PNG.

  • Buenas. Tengo un problema, utilizo el código que has puesto de CSS pero la imagen no se carga en IE6, dices que hay que poner la ruta completa para solucionarlo…

    El caso es que la web la tengo en un localhost creado por xampp, ¿qué dirección debo poner?

    Muchas gracias por adelantado.

  • Ya he arreglado el problema. No funcionaba por las comillas que pusiste en el src. :O
    Muchas gracias de todas formas.

  • Si, estas comillas las filtra WordPress y coloca estas que se asemejan pero no son válidas para los lenguajes de programación.

  • Me funcionó a la perfección. Muchísimas gracias, me ahorraste la compra de Aspirina =)

  • Hola,

    Tengo un problema, he usado el filtro para css, pero cuando uso el SizingMethod con valores: crop, fit o image, me desaparece completamente el fondo.

    Mi fondo es de 1 pixel de alto por 906 de ancho y lo tengo asi:

    
    #fondo
    {
    	background-image: url("../Recursos/Imagenes/fondo.png")!important;
     	background-image: none;
     	filter: none !important;
     	filter:     progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='Recursos/Imagenes/fondo.png', sizingMethod='scale');
    	background-position:center;
    	background-repeat:repeat-y;
    }
    

    Solo si lo pongo en valor scale aparece y la transparencia funciona PERO me hace el fondo mas grande de lo que es como unos 10 pixeles mas, y la pagina me queda mal. Es como si me ensancha el fondo. Alguien me puede ayudar??

  • #23 El problema es que la propiedad filter no permite el uso de más valores para el atributo SizingMethod.

    Y de las 4 posibilidades que tenemos ninguna parece que nos ayude a solucionar tu problema ya que necesitas que esa imagen se repita N veces en lugar de estirarse como lo está haciendo…

    ¿Has pensado en cambiar esa imagen por un GIF o ha de ser PNG?

  • Hola,

    ¿Que cambiaria exactamente que la imagen fuera gif y no png?

  • #25 Hombre, dependiendo de la imagen puede variar mucho.

    Los GIF son, respecto, a cálidad inferiores a los PNG, ya que estos únicamente permiten hasta 256 colores, y los PNG pueden alcanzar cualquier profundidad de color.

    Pero dependiendo de la imagen que quieras usar, puedes prescindir de color.

    A nivel código, podrías eliminar todo lo relacionado con filter, ya que IE soporte bien los GIF.

    Espero haberte ayudado. Un saludo y felices fiestas.

  • Hola,

    Si definitivamente he decidido sustituir por gif, muchas gracias por tu ayuda.

    Felices fiestas a todos

  • hola, con anular el filter con «none, important» valida el css?? gracias!

  • #28 el uso de filter no te permite validar los CSS, si quieres que valide tendrás que pensar en cambiar de PNG a GIF o algo parecido.

  • O_o tal vez metiendo el truco en una segunda hoja de estilos que permanezca underground (if IE bla bla…) asi la principal me validaria y podria poner el bonito borrego css en mi pagina juar juar juar.

  • A mi no me sale el método de la CSS. He intentado una y otra vez y no puedo conseguir que funcione. Estoy usando WP y ya verifiqué todo como dice en el artículo, pero nada más no. Ahora odio más a IE.

  • UtiliC la opcion filter que se propone para explorer, pero como es habitual funciona pero a medias….resulta que ustilizo este filtro parara cargar un background con png transparente a una celda especifica, dentro de esta celda tengo una serie de links….pero quedan totalmente desabilitados.
    saco ese filtro y funciona, pongo el filtro y no funciona…alguien sabe algo???

    GRACIAS

  • Muchisisisisisismas gracias… me solucionó la vida.

  • Excelente, La solución JS me funcionó
    perfectamente.
    Gracias!!

  • Che muy bueno gracias, justo que que buscaba.

  • Solo para avisarles que este post me ha servido bastante, no solo el contenido del mismo. si no tambien los comentarios.

    Nieto, si estaria bien que hicieras las modificaciones en el post de unas comillas que andan sobrando por ahi.

  • y si quiero utilizar un png transparente en una lista? de esta forma:

    list-style-image: url(imagen.png);

    para eso como hago para que en IE6 se vea correctamente? que método utilizo?

  • Gracias man, salvaste todo un site con el primer tip. 🙂

    Mas vale que nunca el comentario

  • no se puede abrir mi internet explorer, me marca error pero tengo el firefox y ahi si puedo navegar me pueden ayudar, si se coomunican al email mejor, gracias

  • Resulta que mi transparencia es un fondo de celda.

    Al poner el código css, de arriba, lo que hago es darle el id a la tabla para poner el fondo de tabla transparente.

    Pues el IE lo que haces es sacar la imagen transparente, no como fondo, y me borra todas las celdas de la tabla, es decir, que si tenia algo escrito, ya no aparece, solo aparece la imagen en su tamaño original y no como fondo de tabla.

    ¿Porque?

  • Bueno… se que lo que voy a preguntar es practicamente imposible.

    La propiedad bakground en css me permite ubicar la imagen de background en un lugar determinado. Ahora con los filtros de Css para que funcione en IE 6… puedo darle alguna coordenada a esa imagen???

    yo creo que no… pero seria bueno saber que piensan los expertos!

    saludos… y realmente muy buen post.

    layuta

  • Buenas Layuta, podrías usar la propiedad background-position despues del filter. Ahi podrás definir donde ubicar el background.

  • gracias estoy probando el js.
    para un funcionamiento más eficiente.

  • Le he estado dando mil vuelta y halgo me falla, en mi hoja de estilo tengo lo siguiente:

    
    .tablafondo {
    	background-image: url("imagenes/transparente.png")!important;
    	background-repeat: repeat-y;
    	background-position: center;
     	background-image: none;
     	filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=’imagenes/transparente.png’, sizingMethod=’scale’);
    }
    

    Donde podría estar el fallo? gracias a todos.

  • @filly: ¿estás seguro de que la ruta es del prodig: … es correcta? Generalmente el mayor problema viene por la ruta, que tiene que ser relativa desde el root del servidor web.

  • He modificado la ruta pero nada:

    
    #fondo {
    	background-image: url("imagenes/fondo_b.png")!important;
    	background-repeat: repeat-y;
    	background-position: center;
    	background-image: none;
    	filter: none !important;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagenes/transparente.png’);
    }
    
    En el  tengo:
    
    
    <!--[if lt IE 7]>-->
    

    Y el fichero pngfix.js lo tengo en la raiz tal y como está la ruta a la que hago la llamada, y nada de nada.

    gracias por la ayuda.

  • @filly: La ruta (imagenes/transparente.png) no es la ruta desde el root. Suelen empezar con /, de todas formas pegame el código, pero reemplaza los tags < y > por su carácter &lt; y &gt; respectivamente.

  • Xema, ¿solucionaste el problema para «list-style-image»?

  • he olvidado la contraseña de control parental de internet explorer como puedo reestablecer el explorador???

  • ¡Gracias, me funciona a la perfección!

  • me hizo de mucha ultilidad gracias, ningun problema con las dos formas

  • Funciona de maravilla! Muy simple y rápido.

    Muchas gracias!!! 🙂

  • Probe mil js y metodos y no di con la solucion, era algo que me derritio el cerebro como de constumbre com IE, y trasteando di con este post y funciona a la perfección!!!
    Sencillo y muy practico, me sorprendio el parcheo del css…como no cai…
    Enhorabuena….me alegraste la semana!!!, gracias.

  • tengo una pregunta con el jquery en versiones anteriores no me reconoce cuando pongo el div en tamaño cero y se ve feo por qe debe de verse unido los botones solo se veria el div si le das click para despregar otro no se si me puede decir que version hace eso o como puedo solucionar mi problema por que mi pagina se ve horrible en versiones antiguas con ese defecto agradeceria mucho su ayuda.
    esta es la pag
    http://www.santamarta.com.pe/demo/

    el error esta al lado derecho al cargar se muestra espacio entre los botones pero a partir de versiones modernas como la 7 no hay error que aria.

  • Hola, lo tengo asi:

    
    #header {
    position : relative;
    height : 260px;
    width : 100%;
    z-index : 0;
    background : url(../images/header_wall.png) repeat-x !important;
    background-image: none;
    filter: none !important;
    filter:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/nutrimel/images/header_wall.png’);
    }
    

    y no me funciona…que puede ser? la ruta: probe varias formas y no hay caso.
    saludos

  • Bueno, pon un ejemplo, porque no se entiende nada!

  • Saludos.
    Tengo que poner varios dibujos en cabeceras/headers con diferentes colores de fondo y claro, los dibujos tienen que tener una transparencia.

    Su tutorial sobre las imágenes PNG con fondo transparente me ha venido muy bien y estupendo.

    He utilizado el estilo CSS. con una modificación que hice que es al poner la imagen png con un background o color de fondo, en el internet explorer, 6 (por ejemplo) se ve mal.
    Solución: Añadir al estilo: line-height:110px; con el alto que tenga la imagen para que el color de fondo se ocupe del todo.

    Dejo la modificación que hice aquí por si le interesa a alguien.
    .imagen{
    line-height:110px;
    background-image: url(images/1.png)!important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/1.png);
    background-color:#FF9900;
    }

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.