PNG transparente en IE sin height

derkenuke · #1 (**permalink**) 14/07/2008, 17:30

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?

Raulmmmm · #2 (**permalink**) 15/07/2008, 02:49

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.

furoya · #3 (**permalink**) 15/07/2008, 08:15

Busca al final de

Función "opacity"

en uno de los últimos mensajes puede haber algo más.

derkenuke · #4 (**permalink**) 16/07/2008, 17:25

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!

Mikmoro · #5 (**permalink**) 16/07/2008, 17:42

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.

furoya · #6 (**permalink**) 17/07/2008, 07:33

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.

derkenuke · #7 (**permalink**) 22/07/2008, 08:06

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!

furoya · #8 (**permalink**) 28/07/2008, 07:02

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.

derkenuke · #9 (**permalink**) 28/07/2008, 07:27

Cita:

Iniciado por furoya

¿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.