Foros Joomla! Spanish

Zona técnica, debate y cooperación sobre Joomla!

Zonas Joomla! Spanish

Portal Joomla! Spansih
Portal Joomla! Spansih NoticiasComunidad JSZona de Extensiones

Estar informado de J!S

Boletines JS
Sigue el proyecto desde joomlacode
Joomla! Spanish 1.5.26 liberada

Sigue el proyecto desde joomlacode de la 3.0
Joomla! Spanish 3.1.0 liberada

Sigue el proyecto desde joomlacode de la 2.5
Joomla! Spanish 2.5.11 Liberada

Estadistícas del foro

  • Miembros en el foro: 396,919
  • Total Temas: 83,750
  • Total Mensajes: 4
Hay 147 usuarios actualmente navegando en los foros.

Colaboradores Gold

Soporte Publicitario



Like Tree1Apoyos
  • 1 Escrito por Roberto Armengual

 
Antiguo 18-08-2006, 01:51 PM   #1
Banned
 
Avatar de gustavo
 
Fecha de Ingreso: Nov 2005
Ubicación: Bahía Blanca - Argentina
Mensajes: 1,680
gustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to behold
Enviar un mensaje por MSN a gustavo Enviar un mensaje por Skype™ a gustavo
Predeterminado [Traducir] [Texto: My transparent png looks horrible in IE for Elpie]

If you are using IE5.5 or later on Windows, you will notice that .png image files with any transparency look just plain horrible. That is because, Microsoft in its wisdom, did not include support for alpha transparency in these versions of IE.

Ok, so what are your options?
You could use a .gif or .jpg instead. This is the easiest of your options.

Or, you could use IE's support for the AlphaImageLoader filter.
http://support.microsoft.com/default...b;en-us;294714
or, a javascript workaround.

There is also a good Javascript solution here: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Details of the various options are shown in this article at A List Apart

Yet another method, is to use alpha transparent png graphics in your basic css file, and override them with index-transparent gifs for IE in another css file. You would use a conditional statement to call that second, IE-only css file.


Código PHP:
<!--[if lte IE 7]> <link href="http://sitename.com/templates/css/ie6.css" type="text/css" rel="stylesheet" media="all"/> <![endif]--> 

Which is the best?
Each workaround has pros and cons.
Making your image into a .gif is the easiest, but .gifs do not give you the same levels of control over your transparency (no alpha transparency, no degrees of transparency) and file sizes are usually larger for essentially the same image. BUT, all browsers support .gifs.

Using the AlphaImageLoader filter will result in your css not validating. IE recognises it, but other browsers don't and there have been reports of some problems with other, non-IE browsers.

Javascript is better than using the AlphaImageLoader filter, BUT adding more Javascript to your site does increase loading times and not everyone enables js in their browser.

My Recommendation:
If you really must use a transparent .png image file, then I recommend the Javascript solution from the site in the link above. The solution carries minimal overhead, requires very little additional code to be added to your template's index.php, and the workaround works well across all browsers because it is called from a conditional statement so that only IE sees it. The conditional statement they use is also future-proof as it states, "if less than IE7, then..."

I hope you find this useful.
gustavo no está en línea  
Antiguo 18-08-2006, 01:52 PM   #2
Banned
 
Avatar de gustavo
 
Fecha de Ingreso: Nov 2005
Ubicación: Bahía Blanca - Argentina
Mensajes: 1,680
gustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to beholdgustavo is a splendid one to behold
Enviar un mensaje por MSN a gustavo Enviar un mensaje por Skype™ a gustavo
Predeterminado

This works well and avoids the use of javascript, instead relying on the AlphaImageLoader and using a conditional statement so it is used only by IE (less than IE7) ...

Below is the css based on the background image of a DIV tag with ID png_background.

Código PHP:
<style type="text/css"body height:100%; } div#png_background { width:000px; // specify width height:000px; // specify height background-image: url(ew.png); } </style> <!--[if lte IE 7]> <style> div#png_background { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=ew.png,sizingMethod='scale'); } </style> <![endif]--> 
gustavo no está en línea  
Antiguo 08-04-2007, 12:14 AM   #3
Iniciado en Joomla
 
Fecha de Ingreso: Mar 2007
Mensajes: 32
Roberto Armengual is on a distinguished road
Predeterminado Tomo la traducción.

Entrega en en un maximo de 48 hrs. (es una exageracion pero para no errar.)
Abogados me gusta esto.
Roberto Armengual no está en línea  
Antiguo 08-04-2007, 08:45 PM   #4
Iniciado en Joomla
 
Fecha de Ingreso: Mar 2007
Mensajes: 32
Roberto Armengual is on a distinguished road
Predeterminado Mis transparencias png lucen horribles en IE!!!

Si usas internet explorer 5.5 o superior en windows, notaras que que las imagenes con extension .png con transparencias lucen horribles. Esto es porque Microsoft su gran "sabiduria", no incluyo soporte para transparencias alpha en esas versiones de Internet Explorer.

Entonces, que opciones tenemos?
Podrias usar imagenes .gif o .jpg, esta es la opcion mas sencilla.

O podrias usar un soporte de internet explorer para el filtro AlphaImageLoader
http://support.microsoft.com/default...b;en-us;294714
o, un javascript workaround.

Hay también una buena solución Javascript aqui: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Los detalles de los metodos son mostrados en dicho articulo en el apartado A de la lista.

Otro metodo es usar graficos png con transparencias alpha en tu archivo de css, y sobreescribirlo con transparecias-index gifs para IE en otro archivo css. Puedes usar una declaración condicional para llamar un segundo, unicamente archivos css IE.


Código PHP:
<!--[if lte IE 7]> <link href="http://sitename.com/templates/css/ie6.css" type="text/css" rel="stylesheet" media="all"/> <![endif]-->

Cual es el mejor metodo?
Cada uno tiene sus pros y sus contras
Convertir tus imagenes a .gif es lo mas sencillo, pero los gifs no brindan los mismo niveles de control sobre tus transparencias (no hay transparencias alpha, no hay grados de transparencias) y el tamaño de los archivos es usualmente mayor. PERO, todos los navegadores soportan gifs.

Usar el filtro AlphaImageLoader hara que tu css no sea valido. Internet Explorer lo reconoce, pero otros navegadores no, ademas hay reportes de algunos problemas con otros navegadores.

El metodo del Javascript es mejor que usar el filtro AlphaimageLoader, PERO añadir mas Scripts a tu sitio incrementa el tiempo de carga, ademas de que algunos deahabilitan los Scripts en sus navegadores.

Mi recomendación:
Si de verdad necesitas usar archivos png con transparencias entonces te recomiendo la solucion del Script de Java desde el link de arriba. Esta solución lleva minimos ¿?, require poco codigo adicional al index.php de tu template, y el ¿entorno de trabajo? trabaja bien en todos los navegadores porque es llamado desde una declaración condicional que solo internet explorer ve. La declaracion condicional que usan es tambien para todas la versiones, "si es menor que Internet Explorer /, entonces.."

Espero que te sea de utilidad.
Roberto Armengual no está en línea  


 

Marcadores

Herramientas
Desplegado

Permisos de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Códigos BB están Activo
Los Emoticonos están Activo
Código [IMG] está Activo
Código HTML está Inactivo
Trackbacks are Activo
Pingbacks are Activo
Refbacks are Activo