Cualquier blogger con un mínimo de experiencia sabe que Internet Explorer está plagado de errores que nos hacen darnos la cabeza contra el monitor a la hora del diseño. Con este sencillo truco (que además cumple con los estándares: no es un "hack"), podremos mostrar imágenes PNG con fondo transparente en IE5 y 6. El código también soluciona otras fallas de IE7 en lo referente a los estilos CSS...
1) El código JavaScript condicional (sólo IE)
Más sencillo, imposible: copia y pega el siguiente código justo antes de la etiqueta </head>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->
2) Ajustes de imágenes PNG para IE
El script funciona sólo para imágenes cuyo nombre de archivo termina en "-trans.png". Por ejemplo, el logo de Blog-Bazar que está aquí arriba a la derecha se llama "bblogo-trans.png". Con este paso adicional el problema estará solucionado.
Nota: Si utilizas servicios de hosting que cambian el nombre de archivo (como ImageShack), no funcionará. Una excelente alternativa es GooglePages, que permite subir cualquier tipo de archivo con su nombre original.
14 comentarios:
Muchas gracias por esta solución. Era un tema que siempre estaba presente. Lo probaré en breve y diré su resultado, que este problema lo tenia en mi propio blog.
Un saludo :)
Por nada, sé bien lo que es sufrir gracias a IE. Funciona perfectamente, lo estoy usando en este y otros blogs. Si entras con IE, verás durante una fracción de segundo el logo de Blog-Bazar con el típico fondo gris y que enseguida se vuelve transparente. Saludos!
Esta genial, pero... ¿que pasa con los PNG transparentes que estan de fondo en una tabla? Es decir, este codigo hace que se vean bien los img.... pero los que son de background no funciona... ¿Que se puede hacer? Gracias
No veo ninguna razón para que no funcione si todo está correctamente hecho. Quizás usando background:TRANSPARENT url(imagen-trans.png), si es que el estilo predefinido de la tabla está interfiriendo de alguna manera. De todas formas, lo voy a investigar, aunque no soy muy amigo de las tablas (traumas con mis maestras de matemáticas ;-)
A mi me ocurre lo mismo que a "Link", en mi css, todos los que uso como background no van, directamente no los muestra. Y no lo uso como fondo de tabla, si no como lista o en div. Por ejemplo uso:
background: transparent url(../images/*.png) repeat-x center left;
y nada.
Saludos y gracias.
Diego y Link: la verdad es que sería muy útil tener la URL de sus blogs, a ver si veo algún error, no precisamente en sus blogs, tal vez en el script (por cierto, recomiendo habilitar sus perfiles de Blogger, son una buena fuente de tráfico, siempre es posible elegir que blogs se mostrarán en ellos).
En otro blog tuve que reemplazar "[if lt IE 7]" por "[if IE 6]", por una incompatibilidad con otro script. Prueben con eso; si no funciona, dejen sus URLs que copio el CSS y lo experimento offline.
Gracias por comentar!
Bueno, encontré el problema (o al menos uno de ellos) con los PNG usados como background en IE6...
Sólo hace falta agregar al CSS:
table {
position: relative;
background: url(fondo-trans.png) no-repeat;
}
donde table hace referencia al elemento con el que tenemos problemas (en este caso asumí que toda la tabla tiene un fondo semi-transparente).
Copio la solución que encontré en http://blog.jopicar.com/2007/11/20/png-transparente-vs-internet-explorer/
"Si no os interesa este marrón, os digo la forma en que debéis guardar un png transparente en Photoshop y conseguir que este anacrónico navegador presente la transparencia sin horrores de código:
Los pasos a seguir en Photoshop son:
1. Guardar como web
2. PNG-8 >> Perceptual >> con transparencia >> sin tramado de trasparencia"
^ReG^
Regalado, eso es justamente para que no tenga transparencia, es decir, el PNG quedará con un fondo del color especificado en la última capa de Photoshop, que sería lo mismo que usar un JPG u otro tipo de imagen normal.
Una mejor opción, si es que estamos usando Photoshop o similar, es guardarlo como GIF transparente, aunque la calidad es infinitamente inferior (por ejemplo, el subrayado animado que aparece detrás de ciertos links en este mismo blog es un GIF animado).
Hola, tengo una consulta, y es también con respecto a PNG transparente como background, no me sirvieron las soluciones que dieron. Y no puedo utilizar un gif transparente porque la imagen tiene un efecto de sombra.
Muchas Gracias.
Hola a todos!
Quiz{as alguno me pueda ayudar con mi problema. MI blog está hecho de muchos png transparentes creados en photoshop y guardados con
"-trans.png", el problema es que ya copié en todas las plantillas el código que sale en este post y aún me aparece, en algunos computadores, el fondo en las imagenes que debieran ser transparentes.
¿Qué puedo hacer?
Zenteno, no encontré problemas en tus blogs; se ven perfectos (quizás puedas reducir un poco el tamaño de los PNGs, pero esa es una opinión al márgen).
Paola, no se cuál es tu blog :-$
en ie6 del multiple ie, este truquito no funciona, ni siquiera el logo de este blog.
Por supuesto, el truco busca cuál es el browser activo en el Registro de Windows; en Multiple IE los cambios se hacen en un DLL, Windows no sabe cuál versión está usando, mucho menos lo sabe el explorador.
Este truco es una "medida de fuerza", la solución definitiva es Firefox ;-)
Publicar un comentario en la entrada