Retroceder   Foros del Web > Diseño de Sitios web > CSS
Crea un nuevo usuario o inicia sesión utilizando tu cuenta de Facebook
Connect with Facebook

Respuesta
 
Herramientas Desplegado
Antiguo 21-nov-2007, 22:55   #1 (permalink)
alcamadi ha deshabilitado el karma
 
Avatar de alcamadi
 
Fecha de Ingreso: marzo-2006
Mensajes: 44
alcamadi está desconectado
Pregunta viñeta, imagenes y fondo transparente en IE

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.

Cita:
/* 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.
  Responder Citando
Antiguo 22-nov-2007, 02:59   #2 (permalink)
txiripindo se está portando bien
 
Avatar de txiripindo
 
Fecha de Ingreso: noviembre-2003
Ubicación: Pamplona - Navarra
Mensajes: 36
txiripindo está desconectado
Re: viñeta, imagenes y fondo transparente en IE

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 : )
  Responder Citando
Antiguo 22-nov-2007, 09:17   #3 (permalink)
alcamadi ha deshabilitado el karma
 
Avatar de alcamadi
 
Fecha de Ingreso: marzo-2006
Mensajes: 44
alcamadi está desconectado
Re: viñeta, imagenes y fondo transparente en IE

Gracias por responder....

pero me quedo una duda... luego de implementar

Cita:
.nav_pie ul li {
behavior: url("iepngfix.htc");
}
ya solo tendria que llamar la la viñeta con el png sin ningun problema?

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

Cita:
.nav_pie ul li{
behavior: url("iepngfix.htc");
background: url(../images/icon_info2.png) 0.1em 0.0em no-repeat;
}
Gracias.
  Responder Citando
Antiguo 22-nov-2007, 09:42   #4 (permalink)
txiripindo se está portando bien
 
Avatar de txiripindo
 
Fecha de Ingreso: noviembre-2003
Ubicación: Pamplona - Navarra
Mensajes: 36
txiripindo está desconectado
Re: viñeta, imagenes y fondo transparente en IE

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!
  Responder Citando
Antiguo 22-nov-2007, 10:37   #5 (permalink)
alcamadi ha deshabilitado el karma
 
Avatar de alcamadi
 
Fecha de Ingreso: marzo-2006
Mensajes: 44
alcamadi está desconectado
Re: viñeta, imagenes y fondo transparente en IE

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

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

de nuevo muchas gracias.

Última edición por alcamadi; 22-nov-2007 a las 14:04
  Responder Citando
Respuesta
Calificación: Calificación de Tema: 1 votos, 1,00 de promedio.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.

Herramientas
Desplegado

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

BB code está Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado
Trackbacks está Desactivado
Pingbacks está Desactivado
Refbacks está Desactivado



La zona horaria es GMT -6. Ahora son las 19:37.
Políticas de Uso de Foros del Web


Message Board Statistics

SEO by vBSEO 3.3.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100