Daniel Blog

Pues escuchando a algunos de los usuarios de este blog que demandaban (no se por que) poder ver este blog correctamente o al menos medianamente correcto desde el infame Internet Explorer, pues me ha llevado una hora de estar googleando para dar con la solución y por supuesto que la publico pues tal vez le sirva a alguno de ustedes en un futuro y así evitaran gastar cerca de una hora de su vida.

Pues sucede que este blog solo tiene 5 imágenes y las 5 son un fondo via CSS, pero al parecer la única forma (no he encontrado otra) de poner un fondo png en CSS compatible con IE es con la siguiente instrucción:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='directorio/imagen.png');

Este filtro esta implementado en IE desde la versión 4 y utiliza parte de DirectX para mostrar las imágenes png. Es realmente importante que el atributo src sea una ruta absoluta pues de otra forma no funcionara. Este filtro no nos dará un CSS totalmente valido pero al menos si uno que funcione en el vil Explorer.

Este es el código necesario en el CSS para que funcione correctamente, la primera instrucción corresponde a un elemento de 100 pixeles por 100 pixeles y tiene de fondo una imagen png. La segunda corresponde a una declaración del mismo elemento solo que esta vez los navegadores decentes (casi todos menos IE) no la tomaran en cuenta pues para ellos esto no es del todo valido, sin embargo IE si tomara esta instrucción y es ahí donde utilizaremos la instrucción filter para colocar en IE el fondo png.

#cajaPNG { width: 100px; height: 100px; background:  url(‘imagen.png’);}* html body #cajaPNG{ background-image: none; filter: none !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png');}

Es importante que la instrucción background-image este en none, pues IE al no entender la transparencia alpha de los png les coloca un color de fondo ( probablemente heredado de otra declaración css ) y este color puede ser anulado con esta instrucción. Después colocamos la instrucción filter, otra cosa que es realmente importante es la siguiente instrucción:

#cajaPNG div { position: relative;}

si el elemento #cajaPNG contendrá otros elementos como divs adicionales y estos a su vez contienen inputs o vínculos (cualquier elemento activo ), en el caso de los vínculos estos se desactivaran en IE se mostraran como texto plano, así que por alguna razón que desconocemos el hacer a los elementos debajo de #cajaPNG relativos hace que estos elementos se activen de nuevo, lo he dicho siempre, no entiendo la filosofía de IE, pero bueno, al menos este problema ya se soluciono en IE7, ese era el problema de este blog, ya pueden disfrutar de este blog en IE.

Actualización (24/01/08):

• En la practica he descubierto algunas cosas como que… si tienes un fondo y a ese le aplicaste el filter ese fondo debe tener mínimo un width establecido  para poder mostrar el fondo con un png transparente si no ni aunque ruges aparecerá.
• Cuando invocas un filter para poner un fondo con png transparente deber hacerlo con un id no puedes declararlo en una instrucción css que comience con una clase, se puede aplicar a una clase pero para eso debe estar contenida en un elemento que tenga id y de ahí comenzar a declarar la instrucción, siempre partiendo del id de lo contrario nos ignorara por completo.
• Ya había comentado que las rutas de las imágenes png a poner en la instrucción filter deben ser absolutas, ¿cierto?.
• Si utilizas el png como un fondo y este repite estas obligado a utilizar el parámetro sizingMethod=’scale’ no utilices sizingMethod=’crop’ pues solo distorsionaras el fondo png.
• Otra forma de activar los elementos activos que fueron anulados al estar dentro de un contenedor con fondo transparente es cambiarles la posición a relativa, algo como: * a  { position: relative; } funcionara.