Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > layer order z-index not working: help!!

Reply
Thread Tools

layer order z-index not working: help!!

 
 
Susanne West
Guest
Posts: n/a
 
      02-20-2007


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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].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[i]))!=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>
 
Reply With Quote
 
 
 
 
Bergamot
Guest
Posts: n/a
 
      02-20-2007
Susanne West wrote:
>
> sorry for the massive code snippet


Post a URL instead

--
Berg
 
Reply With Quote
 
 
 
 
Susanne West
Guest
Posts: n/a
 
      02-21-2007
Bergamot wrote:
> Susanne West wrote:
>
>>sorry for the massive code snippet

>
>
> Post a URL instead
>



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





 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-21-2007
Susanne West wrote:
> Bergamot wrote:
>> Susanne West wrote:
>>
>>> sorry for the massive code snippet

>>
>>
>> Post a URL instead
>>

>
>
> can't, sorry.


And who has the gun to your head?

> but the file is self-contained and
> won't du any ugly tricks...


????

> it's just the case
> is not that simple...


Neither will the answer this way!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      02-21-2007
Susanne West wrote:
> Bergamot wrote:
>> Susanne West wrote:
>>
>>>sorry for the massive code snippet

>>
>> Post a URL instead

>
> can't, sorry.


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?

--
Berg
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      02-21-2007
On 2007-02-20, Susanne West <(E-Mail Removed)> wrote:
>
>
> 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...


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
 
Reply With Quote
 
Susanne West
Guest
Posts: n/a
 
      02-22-2007


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.







Ben C wrote:
> On 2007-02-20, Susanne West <(E-Mail Removed)> wrote:
>
>>
>>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...

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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
business layer, data access layer , presentation layer for asp.net using C#.net Dhananjay ASP .Net 1 12-18-2006 11:35 PM
how to get layer 2 trough layer 3 ? C Cant Cisco 11 04-19-2005 05:07 PM
Layer 4 device on a Layer 3 switch Warrick FitzGerald Cisco 5 02-24-2004 03:45 PM
bridge / layer 2 switch / layer 3 switch Joel M. Baldwin Cisco 2 11-06-2003 11:19 PM
difference b/w layer 2 switch and layer 3 switch praveen Cisco 1 10-22-2003 07:19 AM



Advertisments