viñeta, imagenes y fondo transparente en IE

[alcamadi]

Hola a todos ... tengo un problema a ver si alguno de ustedes me puede dar una manito con esto.

de ante manos quiero decirles que soy novata en el manejo de css y div y darle las gracias a todos los que lean este post.

Bueno el problema es el siguiente.

tengo una lista con viñetas personalizadas (con una imange .png de fondo transparente); lo que necesito es que esa imagen se me vea bien el el IE ya que en FF y Opera se ve bien.

El codigo CSS que tengo es el sig.

/* Navegador pie para columnas 350*/
.nav_pie{
padding-left:0px;
padding-top:4px;
/* padding-bottom:10px;*/
}
.nav_pie ul{
font-weight:bold;
padding-left: 3px;
margin-left: 5px;
list-style-type: none;
}
.nav_pie ul li, .col_200 .nav_pie ul li{
padding-left: 21px;
margin-bottom: 8px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-bottom: 5px;
}
.nav_pie ul li{
background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;
}
.nav_pie ul li:hover{
color:#536604;
}

me gustaria implementar el filtro DX
algo como esto

#NombreElemento {
width: 400px;
height: 219px;
background-image: url("icon_info2.png") !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='i../images/icon_info2.png');
}

pero con "background-image:"

Otra cosa... no puedo exportar la imagen a .gif, ya que esta al hacer la exportacion me queda de muy mala resolución.

si conocen otra forma de hacer esto me gustaria que me ayudaran con esto.

[txiripindo]

Hola Alcamadi!

Yo acabo de experimentar largo y tendido sobre ese tema, te cuento a las conclusiones a las que he llegado (que me corrijan si me equivoco):

-Intenet Explorer, hasta la versión 7 (que creo esta lo hace ya correctamente) no muestra la transparencia de los PNG
-Para que lo haga, hay que molestarse en programar para él en particular, usando JavaScript y un estilo CSS propio.
-Aún así, nos encontramos con algunas limitaciones: No se puede repetir dicha imagen mediante CSS (background-repeat) ni modificar su posición al producirse el evento :hover o cualquier otro (background-position). Por ejemplo: no podemos hacer un botón con un fondo que tenga un PNG transparente y que al pasar el ratón sobre él, se mueva.
De todas formas, ésto no es lo que quieres hacer, pero te lo digo por si lo quieres intentar en otra ocasión.

Te desaconsejo usar filtros como el que has comentado, no sé si eso molestará a los demás navegadores, yo prefiero hacerlo así:
Aparte de poner en el documento CSS que tienes el código para que se vea en el resto de navegadores, asigna a tu página un estilo para Internet Explorer mediante un condicional en el HEAD de tu página de ésta forma:

Código:

 <!--[if lt IE 7]><style type="text/css">@import "archivos/estilo-para-Explorer.css";</style><![endif]-->

Luego, en esa hoja de estilo para Explorer, pon lo siguiente:

Código:

.nav_pie ul li {
 behavior: url("iepngfix.htc");
}

Podrías usarlo en más elementos de tu página separándolos por comas:
.nav_pie ul li, #otro_elemento, .otro_mas { ... }

Y por último, necesitas el archivo iepngfix.htc (hay varios, yo te aconsejo éste que sé que funciona bien) que puedes encontrar en la dirección:
www.twinhelix.com/css/iepngfix/iepngfix.zip.
Presta antención a la ruta hasta el archivo desde el CSS, si no lo encuentra no funcionará. Hay que calcular la ruta desde el documento Html, no desde el CSS.


De ésta forma, se verá correctamente la transparencia de tus PNG´s en Internet Explorer y en el resto de navegadores con el mínimo código intrusivo.

Suerte : )

[alcamadi]

Gracias por responder....

pero me quedo una duda... luego de implementar

.nav_pie ul li {
behavior: url("iepngfix.htc");
}

ya solo tendria que llamar la la viñeta con el png sin ningun problema?

.nav_pie ul li{
background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;
}

o me toca hacer

.nav_pie ul li{
behavior: url("iepngfix.htc");
background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;
}

Gracias.

[txiripindo]

Lo que tienes que hacer es:

-Por un lado dar la información normal sobre el estilo en tu hoja de estilos general.

Código:

.nav_pie ul li{
background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;
}

-Por otro lado, y en su hoja de estilos propia, decirle a Internet Explorer que para determinados elementos, use el achivo JavaScript iepngfix.htc
(Recuerda que la ruta hasta el archivo la has de calcular desde el documento Html)

Código:

.nav_pie ul li {
behavior: url("iepngfix.htc");
}

Es decir, en la hoja de estilos para Internet Explorer no es necesario que repitas lo de:

Código:

background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;

¿Me he explicado bien?
Pruébalo, ya verás que funciona perfectamente.
Suerte!

[alcamadi]

OK muchas gracias ... lo voy a probar y le comento .....

Lo probe y funciona perfectamente ..... ya le regale su karmita.

de nuevo muchas gracias.