Foros del Web » Creando para Internet » CSS »

PNG transparente en IE sin height

Estas en el tema de PNG transparente en IE sin height en el foro de CSS en Foros del Web. Hola: Tengo un DIV con un fondo transparente al que le aplico el hack para IE de la propiedad filter. Ese DIV tiene una lista ...
  #1 (permalink)  
Antiguo 14/07/2008, 18:30
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
PNG transparente en IE sin height

Hola:

Tengo un DIV con un fondo transparente al que le aplico el hack para IE de la propiedad filter. Ese DIV tiene una lista UL con enlaces. Entonces tengo un problema:
  • Si al DIV le aplico un height me hace la transparencia perfecta, pero los enlaces no responden (se toman como texto normal, no se pueden hacer click )
  • Si al DIV no le aplico un height funcionan los enlaces, pero no la transparencia.
Este es el código:
Código HTML:
<div id="divPrincipal">
	<h1>Título principal</h1>
	<div id="cuerpo">
		<p>El título de la lista</p>
		<ul id="listaDrafts">
			<li><a href="imagenes/bandera.jpg">foo</a></li>
			<li><a href="imagenes/desarrollo-verde.jpg">bar</a></li>
			<li><a href="imagenes/biblioteca.jpg">foobar</a></li>
			<li><a href="imagenes/implicados.jpg">barfoo</a></li>
		</ul>
	</div>
</div> 
Y el CSS sería el siguiente:
Código:
body {
	background-image: url(http://images.inmagine.com/48nwm/imagemore/m122980/m122980020.jpg);
	background-repeat: repeat;
}
#divPrincipal {
	background-image: url(http://img185.imageshack.us/img185/5847/azulry7.png);
	background-repeat: repeat;
}
* html #divPrincipal {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img185.imageshack.us/img185/5847/azulry7.png', sizingMethod='scale');
	height: 1px;
}
Y eso, así como está bien la transparencia, mal los enlaces; y si se lo quito la transparencia mal y los enlaces bien.

He colgado temporalmente la imagen y he puesto rutas de imagenes de internet para que podáis probarlo y ayudarme mejor. Pongo las imagenes, por si hay problemas:




¿Existe solución?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #2 (permalink)  
Antiguo 15/07/2008, 03:49
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: PNG transparente en IE sin height

Sí hay solución, pero sufre de "divitis":
Código HTML:
<style>
body {
	background-image: url(http://images.inmagine.com/48nwm/imagemore/m122980/m122980020.jpg);
	background-repeat: repeat;
}
#divPrincipal  {
	position: absolute;
	z-index: 10;
}
#fondo {
    position: absolute;
	z-index: 0;
	width: 98%;
	background-image: url(http://img185.imageshack.us/img185/5847/azulry7.png);
	background-repeat: repeat;
	height: 180px;
}
</style>
<!--[if lte IE 6]>
<style>
* html #fondo {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img185.imageshack.us/img185/5847/azulry7.png', sizingMethod='scale');
	height: 180px;
}
</style>
<![endif]-->
fafhlejafñeiafñoanh
<div id="contfondo">
<div id="divPrincipal">
	<h1>Título principal</h1>
	<div id="cuerpo">
		<p>El título de la lista</p>
		<ul id="listaDrafts">
			<li><a href="imagenes/bandera.jpg">foo</a></li>
			<li><a href="imagenes/desarrollo-verde.jpg">bar</a></li>
			<li><a href="imagenes/biblioteca.jpg">foobar</a></li>
			<li><a href="imagenes/implicados.jpg">barfoo</a></li>
		</ul>
	</div>
</div>
<div id="fondo"></div>
</div> 
A mí es lo único que se me ha ocurrido.
  #3 (permalink)  
Antiguo 15/07/2008, 09:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: PNG transparente en IE sin height

Busca al final de

Función "opacity"

en uno de los últimos mensajes puede haber algo más.
  #4 (permalink)  
Antiguo 16/07/2008, 18:25
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: PNG transparente en IE sin height

Hola de nuevo:

Gracias por responder a los dos. Raulmmmm, creo que tu solución no me va a valer porque utiliza position:absolute y en mi código es dificil de adaptar...

furoya: El post es muy largo, y no sé a qué se puede aplicar la propiedad opacity de CSS, no veo si se puede amoldar a mi ejemplo, no sé si tiene algo que ver.


Saludos y gracias, y si a alguien se le ocurre algo más que sea libre de postearlo, porque no he visto manera de resolverlo aún.


Saludos!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 16/07/2008, 18:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: PNG transparente en IE sin height

Una manera sería darle una altura a la capa transparente y sacar el div con la ul de ahí, colocándola después con posición relativa, pero no sé si le puedes dar ese tamaño de alto a tu capa:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>black-river</title>
<style type="text/css">
body {
background-image: url(http://images.inmagine.com/48nwm/ima...22980020.jpg);
background-repeat: repeat;
}
#divPrincipal {
background-image: url(http://img185.imageshack.us/img185/5847/azulry7.png);
background-repeat: repeat;
height: 200px;
}
* html #divPrincipal {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='http://img185.imageshack.us/img185/5847/azulry7.png', sizingMethod='scale');
height: 200px;
}
#cuerpo {position: relative; top:-150px;}
</style>
</head>
<body>
<div id="divPrincipal">
<h1>Título principal</h1>
</div>
<div id="cuerpo">
<p>El título de la lista</p>
<ul id="listaDrafts">
<li><a href="imagenes/bandera.jpg">foo</a></li>
<li><a href="imagenes/desarrollo-verde.jpg">bar</a></li>
<li><a href="imagenes/biblioteca.jpg">foobar</a></li>
<li><a href="imagenes/implicados.jpg">barfoo</a></li>
</ul>
</div>
</body>
</html>
Por cierto: qué bueno que hayas puesto la dirección absoluta de las imágenes para poder probar cosas con ellas.

Mikel.
  #6 (permalink)  
Antiguo 17/07/2008, 08:33
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: PNG transparente en IE sin height

Cita:
Iniciado por derkenuke
...El post es muy largo...
Y bueno, sí, por algo es el más completo sobre el asunto. Pero ¿cuánto tiempo te toma leer un tutorial?. Hagamos de cuenta que estás leyendo uno.


Igual te doy una ayuda. Tollelle tuvo la misma duda que tú, porque en ese tema se mencionó lo de usar *.png con canal alpha. El problema es que en esa época se estaba poniendo de moda un escript o un tipo de archivo propietario (no recuerdo la extensión) que era usado como cut & paste sin entenderlo, y después —cuando andaba mal— empezaban las lágrimas en el foro porque no sabían cómo configurarlo. (no sabían javascript, bah)

Por eso terminé poniendo un método con CSS y HTML para simular fondos degradados con transparencia, que en su momento funcionaban hasta con IE5.

Pero volviendo a lo tuyo, la pregunta era ésta

Función "opacity" #8

la respuesta está en

Función "opacity" #23

y algo más sobre filtros y altura es

Función "opacity" #19

Por supuesto, huelga decir que dese IE 7 el PNG se ve perfectamente; y en los demás navegadores, desde todas las versiones.
  #7 (permalink)  
Antiguo 22/07/2008, 09:06
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: PNG transparente en IE sin height

Bueno, se me fue un poco de la cabeza este post...

Gracias Mikmoro por tu aportación, los tiros iban por ahí, por el position:relative del contenido.

Y muchas gracias a ti también furoya por esclarecerme el post. La solución, tal y como comentas en tu pasado mensaje de respuesta del post http://www.forosdelweb.com/f53/funci...3/#post1391724 la vi aqui:
http://www.tripix.net/?p=36

Ahí se comenta:
Cita:
Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relativo.
Así que le puse position:relative a todos los enlaces, y funcionan, pero el cursor encima del texto no cambia, sigue siendo la flecha; así que me decidí por darle position:relative a todos los elementos de dentro de #divPrincipal, que sí que puedo hacerlo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>

<style type="text/css">
body {
	background-image: url(http://images.inmagine.com/48nwm/imagemore/m122980/m122980020.jpg);
	background-repeat: repeat;
}
#divPrincipal {
	background-image: url(http://img185.imageshack.us/img185/5847/azulry7.png);
	background-repeat: repeat;
}
</style>


<!--[if gte IE 5.0000]> 
<style type="text/css">
#divPrincipal {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img185.imageshack.us/img185/5847/azulry7.png', sizingMethod='scale');
	height: 1px;
}
#divPrincipal * {
	position: relative;
}
</style>
<![endif]-->

</head>

<body>


<div id="divPrincipal">
	<h1>Título principal</h1>
	<div id="cuerpo">
		<p>El título de la lista</p>
		<ul id="listaDrafts">
			<li><a href="imagenes/bandera.jpg">foo</a></li>
			<li><a href="imagenes/desarrollo-verde.jpg">bar</a></li>
			<li><a href="imagenes/biblioteca.jpg">foobar</a></li>
			<li><a href="imagenes/implicados.jpg">barfoo</a></li>
		</ul>
	</div>
</div>

</body>
</html> 

Así no habría problemas, de momento... lo que hay que hacer para que IE trague...


Un saludo y gracias!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #8 (permalink)  
Antiguo 28/07/2008, 08:02
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: PNG transparente en IE sin height

Sí, es de terror. Pero insisto, ¿el problema es la versión 6, no?. Lamento no poder ayudarte más porque en la siguiente ya reconoce los *.png; y supongo que no arruinará los enlaces. Yo ya no tengo ningún navegador para probarlo.
Y es cierto Mikmoro, tu le habías acertado antes. Perto pienso que mi enlace tampoco estaba de más. Siempre aparece algún otro dato.
  #9 (permalink)  
Antiguo 28/07/2008, 08:27
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: PNG transparente en IE sin height

Cita:
Iniciado por furoya Ver Mensaje
¿el problema es la versión 6, no?
Sí, el problema es únicamente con la versión 6.

Pero doy el tema por solucionado al ponerle position:relative a todos los hijos de la capa en cuestión, funciona de maravilla.


Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 00:10.