.png con IE

[Yainea]

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

[salvaydor]

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

[Yainea]

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

[salvaydor]

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

[sjam7]

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

[bookmaster]

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/

[bokejor]

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

[Yainea]

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.

[Ánima]

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?

[qnonosfaltedena]

Iniciado por bokejor

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?

[Ekbrilo]

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.

[qnonosfaltedena]

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?

[Ekbrilo]

Bueno, para los rollover CSS existe varias modalidades, una muy conocida es la que se explica en http://ervdesign.net/blog/?p=88

[qnonosfaltedena]

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??

[Ekbrilo]

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.

[qnonosfaltedena]

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.

[Ekbrilo]

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

[elPive]

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