Transparencias en IE 8 con listas ul y li

ingeday · #1 (**permalink**) 20/07/2009, 11:32

Buenas... estoy haciendo un Menu Desplegable, pero quuisiera que el menu tuviese transparencias y logro hacerlo con Firefox pero no co IE8.

Aqui esta el codigo.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<script language="JavaScript" type="text/javascript" src="images/menu_desp/menu_scr.js">
</script>

<style>
<!--
body {
background:url(http://i1.tinypic.com/6o101ol.jpg);
	}
ul.menu
{
   list-style:none;
   }
ul.menu a
{ color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }   
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;   
   color:#FFF;
   background:#C00;
}
ul.menu ul
{
   position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
   left:30px; /* Para que no monte sobre el <li> */
   top:-1px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}	

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
   position:absolute;
   left:-41px;
   top:19px;
   display:none;
   list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
   display:inline;
}
-->
</style>
</head>

<body>
<div style="opacity:0.7; filter:alpha(opacity=10)">
<ul class="menu">
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a>
	<ul>
    	<li><a href="#">Enlace 3.1</a></li>
       	<li><a href="#">Enlace 3.2</a>
        	<ul>
            	<li><a href="#">Enlace 3.2.1</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Enlace4</a></li>
</ul></div>
</body>
</html>

Prubenlo en los dos navegadores y quien pueda ayudarme desde ya, muchas gracias.

kseso? · #2 (**permalink**) 20/07/2009, 11:43

Si utilizas la propiedad "opacity" tienes que saber que los de Redmond se ha superado a sí mismo.
Ahora para ie8 tienes que usar:

Cita:

-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=8 0)”;

además de "filter: alpha(opacity = 80)" para los anteriores.
Vamos, lo que se dice "facilitando el proceso creativo" (te obligan a aprender cosas aun más raras y extrañas)
Un Saludo

ingeday · #3 (**permalink**) 20/07/2009, 11:52

Has probado lo que quiero como tu me lo has dicho ??

No me funciona aun....

Le he agregado lo que dices en una clase llamada .transparente sigue funcionando en FF y no en IE8. Miralo y pruebalo.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<script language="JavaScript" type="text/javascript" src="images/menu_desp/menu_scr.js">
</script>

<style>
<!--
body {
background:url(http://i1.tinypic.com/6o101ol.jpg);
	}
ul.menu
{
   list-style:none;
   }
ul.menu a
{ color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }   
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;   
   color:#FFF;
   background:#C00;
}
ul.menu ul
{
   position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
   left:30px; /* Para que no monte sobre el <li> */
   top:-1px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}	

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
   position:absolute;
   left:-41px;
   top:19px;
   display:none;
   list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
   display:inline;
}
.transparente {
	opacity:0.6; 
	filter:alpha(opacity=60); 
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	}
-->
</style>
</head>

<body>
<div class="transparente">
<ul class="menu">
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a>
	<ul>
    	<li><a href="#">Enlace 3.1</a></li>
       	<li><a href="#">Enlace 3.2</a>
        	<ul>
            	<li><a href="#">Enlace 3.2.1</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Enlace4</a></li>
</ul></div>
</body>
</html>

Gracias.

kseso? · #4 (**permalink**) 20/07/2009, 12:03

Pues no, no lo probé antes, principalmente porque no uso ie8.
Pero tienes mucha información accesible vía google sobre la propiedad opacity e ie8:
un ejemplo
Aquí en el foro

Y como no he podido verificarlo, no se hasta qué punto influirá el hecho de que no has puesto las comillas ("...") del código.

Un saludo

jonee · #5 (**permalink**) 20/07/2009, 22:13

Es nesesario que sea transparente el div y el contenido? Yo siempre pienso a futuro cuando tengo que diseñar y maquetar. Cuando quiero algo transparente utilizo un png en alpha y listo, no me complico. Cuando es crear efectos en CSS siempre pienso bien el diseño antes de hacerlo y despues buscar la forma de armarlo. Se gana mucho tiempo.