PDA

Click to See Complete Forum and Search --> : Z-index nightmare in FireFox

aradada
07-06-2008, 08:34 AM
Dear all,

I have the following in a web page:

A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button.
Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable ..............

My divs:
#divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;}
#divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;}

Obviously if I do:
#divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;}
#divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;}

I cannot click on Menu2's links because the drop down disappears behind Menu1.

How can I solve it??
Below, the code. Please note that I'm positioning the menus relative and absolute in a desperate try of solving it. If I position both menus relative or both absolute, it does not work either, I cannot click in menu1's links behind menu2 when in FireFox.

Thanks a lot in advance!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html {background-color:transparent;}
body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
}
#Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;}
#Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;}
-->
</style>
</head>
<body>

<div id="Menu1">
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br>
</div>

<div id="Menu2">
<iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px"
height="218px" frameborder="0" allowtransparency="yes">
</iframe>
</div>

</body>
</html>
WebJoel
07-06-2008, 11:15 AM
I have not tried our code so am not yet familiar with the issue.

For a drop-down to occur, -don't you need javascript? I know that there are a few javascipt-free drop-downs but I am not familiar with how they work.. I have your code on my desktop, -will look at it later today.. :)
Centauri
07-06-2008, 08:31 PM
When you position one div over the top of another that contains links, it is expected that the div on top will block access to the links in the div below - it is IE that is at fault by allowing the links to be active.

From what I can see, there is no need for the dropdown menu to be done in flash anyway, neither is there a need to insert it via an iframe - the whole thing can be done with a few unordered lists in one div.
WebJoel
07-06-2008, 10:53 PM
I noticed that this is FLASH. Placing " style="border:1px solid red;" " in either the "<iFRAME>" or the "<DIV>" container for it, reveals the problem..

I tried reducing the width to something maneagable, but this seem to de-activate the FLASH so clearly I am going about this wrong..

I do agree with the UL layout. This is just a series of anchors..