layer order z-index not working: help!!

Discussion in 'HTML' started by Susanne West, Feb 20, 2007.

  1. Susanne West

    Susanne West Guest

    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>
     
    Susanne West, Feb 20, 2007
    #1
    1. Advertising

  2. Susanne West

    Bergamot Guest

    Susanne West wrote:
    >
    > sorry for the massive code snippet


    Post a URL instead

    --
    Berg
     
    Bergamot, Feb 20, 2007
    #2
    1. Advertising

  3. Susanne West

    Susanne West Guest

    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...
     
    Susanne West, Feb 21, 2007
    #3
  4. 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
     
    Jonathan N. Little, Feb 21, 2007
    #4
  5. Susanne West

    Bergamot Guest

    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
     
    Bergamot, Feb 21, 2007
    #5
  6. Susanne West

    Ben C Guest

    On 2007-02-20, Susanne West <> 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
     
    Ben C, Feb 21, 2007
    #6
  7. Susanne West

    Susanne West Guest

    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 <> 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
     
    Susanne West, Feb 22, 2007
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?YzY3NjIyOA==?=

    do it in database layer or application layer

    =?Utf-8?B?YzY3NjIyOA==?=, Jan 26, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    436
    Karl Seguin [MVP]
    Jan 27, 2006
  2. Federico Bari
    Replies:
    2
    Views:
    1,960
    Federico Bari
    Aug 31, 2003
  3. Dhananjay
    Replies:
    1
    Views:
    1,132
    sloan
    Dec 18, 2006
  4. SAL
    Replies:
    9
    Views:
    523
    Steven Cheng[MSFT]
    Jan 14, 2008
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    317
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page