Foros del Web » Creando para Internet » CSS »

.png con IE

Estas en el tema de .png con IE en el foro de CSS en Foros del Web. Hola, no tengo apenas experiencia con css y estoy intentando llevar a cabo un diseño que hice antes en el photoshop. El caso es que ...
  #1 (permalink)  
Antiguo 27/12/2006, 05:03
 
Fecha de Ingreso: mayo-2006
Mensajes: 11
Antigüedad: 11 años, 7 meses
Puntos: 0
.png con IE

Hola, no tengo apenas experiencia con css y estoy intentando llevar a cabo un diseño que hice antes en el photoshop. El caso es que el fondo es un degradado, asi que al ponerle la imagen con el título, la pongo como .png para que quede bien, pero con IE se ve blanco en vez de transparente. ¿Cómo puedo solucionarlo?

Otra pregunta, en el diseño preliminar he puesto algun adorno por detras de los menús, son imágenes, lo que pasa es que no se muy bien cómo hacer para que queden "pegadas" al menú y no me quede desplazado al cambiar de pc o navegador.

Muchas gracias por adelantado y feliz año nuevo
  #2 (permalink)  
Antiguo 27/12/2006, 05:13
 
Fecha de Ingreso: octubre-2005
Mensajes: 52
Antigüedad: 12 años, 1 mes
Puntos: 0
Sonrisa Re: .png con IE

Hola, Yainea, yo tambien pase por aki.... jejeje.

Te paso el código:

#laclase{
background-image:url(images/link_cont2.png) !important;
background-image: none;
filter:none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=images/link_cont2.png);
}

Pruebalo y nos cuentas
  #3 (permalink)  
Antiguo 27/12/2006, 07:51
 
Fecha de Ingreso: mayo-2006
Mensajes: 11
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: .png con IE

Muchas gracias por tu respuesta, salvaydor
Pues creo que estoy haciendo algo mal, porque pongo exactamente lo que tu me dices (cambiando la ruta de la imagen, claro) y no lo soluciono... Como no se a que te referías y no estoy muy puesta en el tema he probado poniendo la imagen también en el html y sin ponerla, te pego mi código para ver si ves el error:

en el CSS tengo:
Código:
#titulo{
  background-image:url(img/titulo.png) !important;
  background-image:none;
  filter:none !important;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/titulo.png);
}
y en el html:
Código:
<div id="titulo">
  <img src="img/titulo.png" alt="HDR" />
</div>
Así no me hace la transparencia. También pruebo quitándole la etiqueta img de dentro del div, y entonces no muestra ninguna imagen.

Gracias y disculpa lasmolestias
  #4 (permalink)  
Antiguo 27/12/2006, 09:39
 
Fecha de Ingreso: octubre-2005
Mensajes: 52
Antigüedad: 12 años, 1 mes
Puntos: 0
Re: .png con IE

Hola Yainea, pues no se que decirte porque el código lo tienes bien, excepto por poner la etiqueta img dentro, no hay que ponerla. Prueba a ver si la ruta es correcta o si por casoalidad no hayas puesto titulo.png con acento: título.png.

Puedes ver el codigo en funcionamiento en la página que estoy haciendo:

metalicasbolingo.com.

Un saludo
  #5 (permalink)  
Antiguo 28/12/2006, 22:11
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: .png con IE

es tan facil como usar el buscador que ya se ha tratado lo mismo muchisisimas veces pero una mas

http://blog.creandowebs.com/2006/06/...ias-en-ie.html
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
  #6 (permalink)  
Antiguo 29/12/2006, 18:03
Avatar de bookmaster  
Fecha de Ingreso: febrero-2002
Ubicación: Toledo
Mensajes: 976
Antigüedad: 15 años, 10 meses
Puntos: 67
Re: .png con IE

El tema de los PNG lo respondi hace un tiempo y puse el código del archivo JS para solucionarlo, te dejo en enlace.

http://www.forosdelweb.com/f6/tipografia-transparencia-445102/
__________________
Decir si te a funcionado la respuesta es ¡GRATIS!. Por favor indicarlo.
http://www.lohacemosweb.net
http://tutoriales.lohacemosweb.net
  #7 (permalink)  
Antiguo 18/01/2007, 19:42
 
Fecha de Ingreso: enero-2007
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: .png con IE

Mi problema no es ese exactamente, de hecho las transparencias del png ya están resueltas para ie, pero como uso imagenes de sustitución con png resulta que el arreglilllo carga las imagenes de sustitución con mouseover pero no restaura la original con mouseout. Esto si es posible en mozilla, opera e ie 7, pero no en inferiores.

Para resolver las transparencias usé behavior de microsoft.

EDITO: Nada de lo dicho, ya lo he resuelto :P

Última edición por bokejor; 19/01/2007 a las 00:03
  #8 (permalink)  
Antiguo 27/01/2007, 05:37
 
Fecha de Ingreso: mayo-2006
Mensajes: 11
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: .png con IE

Ya se que respondo muy tarde, pero no he entrado en el foro desde hace mucho. Siento haberme repetido preguntando lo mismo ke muchos, ahora ya se donde está el buscador (lo teneis muy bien escondido o soy yo ke soy un desastre)
Y mil gracias, porque con el script solucioné de maravilla.
  #9 (permalink)  
Antiguo 02/02/2007, 11:03
Avatar de Ánima  
Fecha de Ingreso: julio-2002
Ubicación: Catalunya, Barcelona.
Mensajes: 538
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: .png con IE

Saludos! Ya sé que se ha tratado muchas veces pero tengo una duda la cual no he visto en ningún sitio.

En primer lugar decir que tanto con lo de javascript y esto:
Código:
* html #fondo {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logoGDE.png', sizingMethod='crop')
background:;
}
No me ha funcionado en IE.

Por suerte este:
Código:
  background:url(logo.png) !important;
	/*PARA IE6*/
  background-image:none;
  filter:none !important;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png);
Sí que me ha funcionado, con un pero. Resulta que eso se lo aplico a un fondo que se repite en X e Y. Cuando quito el trozo de "para IE6" se ve el fondo (pero sin transparencia) pero cuando pongo ese código sólo se ve una vez el fondo, pero no se repite. He probado de poner repeat-x pero no funciona, alguna idea?
  #10 (permalink)  
Antiguo 16/07/2007, 11:36
 
Fecha de Ingreso: julio-2007
Ubicación: La Mancha Toledana
Mensajes: 30
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: .png con IE

Cita:
Iniciado por bokejor Ver Mensaje
Mi problema no es ese exactamente, de hecho las transparencias del png ya están resueltas para ie, pero como uso imagenes de sustitución con png resulta que el arreglilllo carga las imagenes de sustitución con mouseover pero no restaura la original con mouseout. Esto si es posible en mozilla, opera e ie 7, pero no en inferiores.

Para resolver las transparencias usé behavior de microsoft.

EDITO: Nada de lo dicho, ya lo he resuelto :P
Pero ... ¿cómo lo has resuelto?
  #11 (permalink)  
Antiguo 17/07/2007, 11:23
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: .png con IE

El problema de las transparencias de los PNG con Internet Explorer (hasta la versión 6) es una duda que desalienta e irrita a mucha gente. A mí me sucedía lo mismo hasta no hace mucho, y la verdad es que lo soluciono sin ningún script. Lo que hago es resolverlo con el programa GIMP mediante este procedimiento:

1) abro el GIMP;

2) cargo el PNG problemático;

3) selecciono el mismo color de fondo que tiene la página donde irá el PNG;

4) voy a Filtros --> Color --> Semiaplanar;

5) cambio el Modo de imagen RGB por indexado

6) y guardo una copia del archivo en formato PNG.

Con ese método elimino la transparencia sin añadir script alguno en el código.
  #12 (permalink)  
Antiguo 17/07/2007, 12:41
 
Fecha de Ingreso: julio-2007
Ubicación: La Mancha Toledana
Mensajes: 30
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: .png con IE

ya, el problema es que el color de fondo no es plano, si no una imágen, de ahí la necesidad del degradado transparentes en mi botón


En IE7 la veréis con de degradado y con IE6 con el fodo de algun color, en mi caso gris.
He provado el script JS y me coloca las imágenes bien, pero me anula los script de 'imágen de sustitución' que me ha generado dreamweaver 2004.

Sabe alguien solucionarlo. Alguna solución CSS para las imágenes de sustitución?
  #13 (permalink)  
Antiguo 18/07/2007, 11:33
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: .png con IE

Bueno, para los rollover CSS existe varias modalidades, una muy conocida es la que se explica en http://ervdesign.net/blog/?p=88
  #14 (permalink)  
Antiguo 19/07/2007, 06:09
 
Fecha de Ingreso: julio-2007
Ubicación: La Mancha Toledana
Mensajes: 30
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: .png con IE

Gracias Ekbrilo, lo del rollover está solucionado.

Pero me sigue saliendo la imágen png con fondo. Le tengo puesta la función JS que he encontrado en el foro, pero na. Me muestra las imágenes bien, menos las que están puestas con el rollover.

A alguien se le ocurre algo??
  #15 (permalink)  
Antiguo 19/07/2007, 12:18
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: .png con IE

Si no te entiendo mal, el problema está en que las imágenes del rollover aparecen con ese fondo grisáceo típico del PNG en IE6. ¿Tienes un rollover CSS o uno Javascript -que es el que genera Dreamweaver-? Esto me parece de interés, ya que quizá si actúan dos javascripts a la vez -el del rollover como tal y el añadido al PNG- puede que haya (se me ocurre en este momento) una especie de incompatibilidad entre ambos y que el resultado sea que uno -en este caso el del PNG- no funcione. No sé, como digo es una posibilidad que se me acaba de ocurrir.
  #16 (permalink)  
Antiguo 19/07/2007, 12:31
 
Fecha de Ingreso: julio-2007
Ubicación: La Mancha Toledana
Mensajes: 30
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: .png con IE

Hola otra vez.
Mirad, tengo estos dos código (ambos conseguidos en este gran foro), el primero es para que los PNG se muestren correctamente como fondo en IE6, y el segundo es para hacer un ROLLOVER de imágenes con CSS.

Mi pregunta es ¿cómo combino yo esos códigos para que las PNG del ROLLOVER se muestren correctamente en mi página?

PNG como fondo:
Código:
#header{  background: none; /* Aquí quitamos cualquier fondo existente */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="images/bordes.1.png", sizingMethod="image"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el  método de escala será ahora image, es decir, la misma imagen */
    background-repeat:no-repeat;
    margin-left: 0px;}
ROLLOVER con imagenes en CSS
Código:
a {
  outline: none;
}

.rollover {
  display: block;
  width: 179px;
  height: 53px;
  background: url(images/ficha.i.png) no-repeat;
  text-indent: -9999px;
}

a.rollover:link, a.rollover:visited, a.rollover:active {
  background: url(images/ficha.i.png) no-repeat;
}

a.rollover:hover {
  background-position: -178px;
}
Pues eso, que estoy un poco desesperado, entre que soy un poco torpe y que mis conociemientos no son muy ámplios...

Muchas gracias de antemano.
  #17 (permalink)  
Antiguo 19/07/2007, 12:54
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: .png con IE

Pues hasta donde yo sé (que no es mucho precisamente, ya que también soy un aprendiz en todo esto) en principio no debiera haber problema alguno. Sin embargo, otra cosa que se me ocurre que tal vez pueda guiarte es observar el código fuente de alguna página donde haya rollovers CSS con imágenes PNG, por ejemplo algún tutorial sobre el asunto del estilo de http://cristalab.com/tutoriales/130/..._usando_listas

Un saludo y suerte
  #18 (permalink)  
Antiguo 20/05/2008, 04:33
 
Fecha de Ingreso: octubre-2007
Mensajes: 27
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: .png con IE

a ver el problema creo que es simplemente la transparencia de los .png en fondos css, yo tengo el mismo problema. he encontrado formulas, iguales a la que aqui han expuesto y funcionan, con la salvedad que no las puedo ni repetir ni alinear como quiero. en cuanto le meto el codigo:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’imagen.png’);

deja de funcionar el background-position.

unas lineas mas arriba he leido de alguien que dejaba de funcionarle el background-repeat asi que igual los tiros van por ahi, si alguien sabe cual es la causa o tiene alguna solucion diferente, como un codigo mas general para todas las img .png y asi no ir tratandolas 1 a 1 le estaria muy agradecido ya que no me es demasiado importante pero cada vez que me pasa esto no puedo parar hasta encontrar la solucion.

He buscado infinitas "soluciones" por internet pero ninguna funciona ni con archivos externos ni nada.

Repito que busco la solucion para css y no para el codigo html que ya lo solucione por medio del famoso pngfix.js
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:23.