Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Alvaro Ruiz
z-index en ie
November 15, 2011 3:16 AM
Answer

Alvaro Ruiz

Rank: New Member

Posts: 3

Join Date: November 15, 2011

Recent Posts

Hola,

Estoy empezando con ésto de Liferay y me ha surgido un problema con la propiedad z-index e IE que no logro solucionar.

En la página tengo dos columnas, en la de la izquierda he hecho un menu desplegable con css y en la de la derecha he puesto una imagen, ambos usando el portlet de Web Content y plantillas.

El caso es que el menu cuando se despliega se queda debajo de la imagen y no se ve(En Firefox va perfecto) y no entiendo que puede ser lo que falla.

He puesto un z-index en el menu, pero Internet Explorer no le hace ningún caso.
Ravi Kumar Gupta
RE: z-index en ie
November 15, 2011 3:23 AM
Answer

Ravi Kumar Gupta

Rank: Liferay Legend

Posts: 1212

Join Date: June 23, 2009

Recent Posts

Z index in IE should always be greater than zero..
Ravi Kumar Gupta
RE: z-index en ie
November 15, 2011 3:24 AM
Answer

Ravi Kumar Gupta

Rank: Liferay Legend

Posts: 1212

Join Date: June 23, 2009

Recent Posts

http://www.gobdg.com/blog/2009/05/z-index-internet-explorer-ie6/
Alvaro Ruiz
RE: z-index en ie
November 15, 2011 3:45 AM
Answer

Alvaro Ruiz

Rank: New Member

Posts: 3

Join Date: November 15, 2011

Recent Posts

No me funciona :S

Esta es el template del menu

<style type="text/css">

ul.menu
{
list-style:none;
z-index:800;
}
ul.menu li
{
position:relative;
width:150px;
border: solid 1px Black;
background: url("/html/themes/classic/images/portlet/header_bg.png") repeat-x scroll 0 #D4D4D4;
border-color: #C8C9CA #9E9E9E #9E9E9E #C8C9CA;
border-style: solid;
border-width: 1px;
color: #34404F;
font-weight: bold;
text-shadow: 1px 1px #FFFFFF;
-moz-border-radius: 4px;
padding: 5px;
margin-bottom: 5px;
z-index:450;
}
ul.menu ul
{
position:absolute;
left:139px;
top:-12px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
position: absolute;
display:block;
z-index:101007 !important;
}

ul.menu a {
text-decoration:none;
}

ul.menu li ul li {
margin:0px;
}

ul.menu li ul li:hover, ul.menu li ul li.sfhover{
background: #5B677D;
z-index:101007;
}


ul.menu li ul li:hover a.submenu2,ul.menu li ul li.sfhover a.submenu2{
color: #FFFFFF;
text-shadow: 0px 0px #FFFFFF;
z-index:101007;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<div>
<ul class="menu" id="menu">
<li><a href="#">Opcion1</a>
<ul>
<li><a class="submenu2" href="#">una a</a></li>
<li><a class="submenu2" href="#">una b</a></li>
</ul>
</li>
<li><a href="#">Opcion2</a>
<ul>
<li><a class="submenu2" href="#">una a</a></li>
<li><a class="submenu2" href="#">una b</a></li>
</ul>
</li>
</ul>
</div>



Y éste el de la imagen:

<div style="position:relative; z-index:-1;">
#if ($link.getData() != "")
<a href="$link.getData()">
#end
<img alt="" src="$image.getData()" />
#if ($link.getData() != "")
</a>
#end
</div>


Pero no me hace caso el navegador.