¿Transparencias png en fondo celda en IE?

[raul_denia]

Hola, a ver, me he leido la manera de solucionar el problema de las transparencias con imagenes PNG en IE.

Para ello utilizo el siguiente codigo css

#trans
{
background-image:url(img/fondo_blanco.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,src="img/fondo_blanco.png",sizingMethod='fit');

}

En mi celda le tengo puesto

<td align="center" id="trans">
<p style="font-size:24px; color:#993366">Datos de contacto</p>
<a href="mailto:[email protected]"><p style="font-size:24px">[email protected]</p></a>
<p style="font-size:24px">Telefono y Fax: [phone]</p>
<p style="font-size:24px">Carretera Ondara-Orba Km 5.5 Benidoleig</p>
<p style="font-size:24px">Horario Comercial: 9 a 13:30 y 15:30 a 19:30</p>
</td>

Pues resulta que el IE si que me muestra la imagen, pero no me muestra el contenido de la celda. Y lo que hace es mostrarme la imagen en su tamaño original, y no ocupando toda la celda.

¿Porque?

Gracias

[naf]

Prueba agregando este codigo en el html. Te aseguro que funciona.

<!--inicio de codigo para png transparentes!-->
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
<!--Fin de codigo para png transparentes!-->

[Luis_Cas]

Hola Raul.

En la entrada
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,src="img/fondo_blanco.png",sizingMethod='fit');

la variable sizingMethod debe estar en 'scale', así te escalará a toda la celda y también te saldrá el contenido de la misma. EL problema es que en IE7, que sí que acepta fondos png transparentes, el texto sale también escalado y no queda bien. Para solucionarlo podrías hacer lo siguiente:

Definimos el estilo para todos los navegadores.

<style>
#trans
{
background-image:url(/shared/img/fondo_celda.png);
}
</style>


Si el navegador es IE6 o versiones anteriores, definimos el filtro.

<!--[if lt IE 7]>
<style>
#trans
{
background-image:url(/shared/img/fondo_celda.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,src="/shared/img/fondo_celda.png",sizingMethod='scale');

}
</style>
<![endif]-->

He hecho una prueba y a mi me ha funcionado en IE7, IE6 y Firefox 2.0

Saludos

[MaBoRaK]

loading............

#trans <-- veo que eso e aplica al div con el id='trans'
pero en un div con un classname class='trans'
funciona de igual forma?


connection closed.