layer order z-index not working: help!!

S

Susanne West

hi.

i have this case, where (for about 2 days now) i'm trying to
get z-index to work correctly and i can't figure out what's wrong.

IE seems to completely ignore it, while firefox does it
properly... it's basically just a series of pulldowns done
with div's...


any help is deeply appreciated!

sorry for the massive code snippet, but it's hard to get it
leaner


---------------------------------------------








<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="../styles/styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}



function toggleShows(divId,onoff) {
var db = MM_findObj(divId);
if (onoff == 1){
db.style.display = 'block';
} else {
db.style.display = 'none';
}
}


//-->
</script>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"">

<table width="420" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140">entry 1</td>
<td width="230" height="20"
onMouseOver="toggleShows('shows_001','1');"
onMouseOut="toggleShows('shows_001','0');">
<div style="position:relative; top:0; left:0; width:230;">
<div id="shows_001" style="position: absolute; top:18px;
left:-1; display:none; width:230px; background-color:#e4e3d5; z-index:100;">
<table border="0" cellpadding="0" cellspacing="0" width="232">
<tr>
<td width="60">&nbsp;</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
<div align="right" style="width:230;">
<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">DETAILS</td>
</tr>
</table>
</div>
</div></td>
<td width="50" align="right" >aaa</td>
</tr>
<tr>
<td >entry 2</td>
<td height="20" onMouseOver="toggleShows('shows_002','1');"
onMouseOut="toggleShows('shows_002','0');">
<div style="position:relative; top:0; left:0; width:230;">
<div id="shows_002" style="position: absolute; top:18px;
left:-1; display:none; width:230px; background-color:#e4e3d5; z-index:90;">
<table border="0" cellpadding="0" cellspacing="0" width="232">
<tr>
<td width="60">&nbsp;</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
<div align="right" style="width:230;">
<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">DETAILS</td>
</tr>
</table>
</div>
</div></td>
<td align="right" >aaa</td>
</tr>
<tr>
<td >entry 3</td>
<td height="20" onMouseOver="toggleShows('shows_003','1');"
onMouseOut="toggleShows('shows_003','0');">
<div style="position:relative; top:0; left:0; width:230;">
<div id="shows_003" style="position: absolute; top:18px;
left:-1; display:none; width:230px; background-color:#e4e3d5; z-index:80;">
<table border="0" cellpadding="0" cellspacing="0" width="232">
<tr>
<td width="60">&nbsp;</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
<div align="right" style="width:230;">
<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">DETAILS</td>
</tr>
</table>
</div>
</div></td>
<td align="right" >aaa</td>
</tr>
<tr>
<td >entry 4</td>
<td height="20" onMouseOver="toggleShows('shows_004','1');"
onMouseOut="toggleShows('shows_004','0');">
<div style="position:relative; top:0; left:0; width:230;">
<div id="shows_004" style="position: absolute; top:18px;
left:-1; display:none; width:230px; background-color:#e4e3d5; z-index:70;">
<table border="0" cellpadding="0" cellspacing="0" width="232">
<tr>
<td width="60">&nbsp;</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
<div align="right" style="width:230;">
<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60">&nbsp;So, 13.12.</td>
<td width="152">&nbsp;12.00 15.00</td>
<td width="18">DETAILS</td>
</tr>
</table>
</div>
</div></td>
<td align="right" >aaa</td>
</tr>
</table>
 
S

Susanne West

Bergamot said:
Post a URL instead
Click to expand...


can't, sorry. but the file is self-contained and
won't du any ugly tricks... it's just the case
is not that simple...
 
B

Bergamot

Susanne said:
can't, sorry.
Click to expand...

Sure you can. You posted code, so put that into an html file and upload
it to a publicly accessible web server. Stick it in a test directory of
your domain, or if your ISP gives you some free space use that. If all
else fails, there are free servers like Yahoo/Geocities.

Make it easy for people to help you and you'll get a lot better
response. If you don't make the effort, why should you expect anyone
else to?
 
B

Ben C

hi.

i have this case, where (for about 2 days now) i'm trying to
get z-index to work correctly and i can't figure out what's wrong.

IE seems to completely ignore it, while firefox does it
properly... it's basically just a series of pulldowns done
with div's...
Click to expand...

I don't have IE but I had a look at it anyway because I thought it's
quite likely you don't need z-index at all, and without it maybe you
could avoid the problem.

Without z-index the page works as you want in Opera, but not in Firefox.

I think Opera is correct on this one. A bit of experimentation revealed
that the thing that's confusing Firefox is that the boxes after the one
that you toggle on and off are also in the relatively positioned box.

To recap, you have this:

<rel pos box>
<abs pos box, display: none></abs pos box>
<another box>...</another box>
</rel pos box>

When you switch the abs pos box to display:block, the inline boxes in
<another box> get drawn on top of it (although <another box>'s
background is behind it). There is no justification for this if I
understand the CSS 2.1 spec correctly.

But this works:

<rel pos box>
<abs pos box, display: none></abs pos box>
</rel pos box>
<another box>...</another box>

Positioning is the same, but FF gets the stacking right and you don't
need to use z-index. You will have to try it in IE, where all bets are
off but you never know.

I have uploaded the modified page, without z-index and closing the rel
pos boxes earlier, since people prefer urls. I also gave it a strict
doctype (very important, not using the strict doctype leads to
insanity).

http://www.tidraso.co.uk/misc/pulldowns.html
 
S

Susanne West

to put it simple: you're THE MAN! (*bow,bow,bow*)

thanks!!!! works beautifully! even in IE (believe it
or not).

i finally did keep the z-index in there just for the
sake of the ordering...

the reason for the nested divs was a previous layout
version with only one 'popup'. in that case the problem
was not obvious since no 'overlap' with another box
occured. but i'd still say the way you proposed is
the best.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Nested Loop Insert Page Break 1
Can anyone please help? HTML - two tables applying different styles 4
Angularjs newbie - second JSON datasource does not display 0
SendGrid email issue in responsive Gmail 1
How to have two html audio players on one page? 0
Help needed with thank you message 5
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 143

Forum statistics

Threads
473,756
Messages
2,569,534
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top