trouble with div layer

Discussion in 'HTML' started by Nate12o6, Feb 28, 2007.

  1. Nate12o6

    Nate12o6 Guest

    Im trying to layor one div over another but am having trouble. Take a
    look at the code snippet:

    <body bgcolor="#ffffff" text="#000000" id="htmlsource">

    <div id="clientsDiv" style="float: left; width:25%;">
    <fieldset>
    <legend>Clients</legend>
    <div id="clients" style="float: left; height:478px; overflow:
    auto;">
    </div>
    <div id="loaderContainerClients" onClick="return false;">
    <div id="loaderClients">
    <img src="loading.gif" height="32" width="32" alt=""/>
    </div>
    </div>
    </fieldset>
    </div>
    <div id="orderDiv" style="float: right; width:70%; height:500px;">
    <fieldset>
    <legend>Client order information</legend>
    <span style="position: relative; top: 35%; text-align:center; font-
    size: 3em; font-weight: bold;">
    <p><center>Select Customer</center></p>
    </span>
    </fieldset>
    </div>
    </body>

    The clients div is dynamicaly populated with ajax.
    The CSS looks like this:
    html { overflow-y: scroll; }
    html { overflow: -moz-scrollbars-vertical; }
    body {margin: 2em; background-image: none; background-color: white;
    font-size: .9em; text-align: left; }
    fieldset {background: #fffbef; -moz-border-radius: 5px; height:
    100%; }
    legend {background: #fff; padding: 2px 6px; border: 1px #999 solid; -
    moz-border-radius: 5px; }
    p {margin: 15px 0; padding: 8px; }
    select {width:100%;}
    label {margin: 4px 0; font-weight: bold;}
    p img {margin-left: 10px; }
    /* --- loader ---*/

    #loaderClients img {
    position: absolute;
    left:45%;
    }

    #loaderContainerClients {
    position:relative;
    background-image: url(semi-transparent.gif);
    z-index: 1001;
    width: 100%;
    height: 478px;
    }

    #loaderContainerClients div {
    padding-top: 175px;
    text-align: center;
    }




    /* --- loader ---*/

    #loaderOrder {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    }

    #loaderOrder div {
    padding: 3px;
    background: #ffffff;
    }

    #loaderOrder p {
    border: 3px solid #6E89DD;
    padding: 10px;
    margin: 0;
    background: #EEF0FC;
    }

    #loaderOrder img {
    float: left;
    margin-right: 12px;
    }

    #loaderOrder strong {
    display: block;
    margin-bottom: 3px;
    }

    #loaderContainerOrder {
    position: absolute;
    width: 74%;
    height: 478px;
    position: expression('absolute');
    z-index: 10001;
    background-image: url(semi-transparent.gif);
    }

    #loaderContainerOrder div {
    padding-top: 150px;
    vertical-align: top;
    text-align: center;
    }

    #loaderContainerOrder div div {
    padding-top: 3px;
    text-align: left;
    }

    It looks perfect in Firefox but in IE the loaderContainerClients div
    will not layor on top of clients. It goes directly underneath.
    Shouldnt the z-index take care of this?

    Any help would be apreciated.
    Nate12o6, Feb 28, 2007
    #1
    1. Advertising

  2. Nate12o6

    John Hosking Guest

    Nate12o6 wrote:
    > Im trying to layor one div over another but am having trouble. Take a
    > look at the code snippet:


    Unless you've only got a two-line snippet (and even sometimes in that
    case as well), it's generally better to simply provide a URL.

    > <body bgcolor="#ffffff" text="#000000" id="htmlsource">
    > <div id="clientsDiv" style="float: left; width:25%;">
    > <fieldset>


    [blah blah snipped]

    > </fieldset>
    > </div>
    > <div id="orderDiv" style="float: right; width:70%; height:500px;">
    > <fieldset>


    [more blah snipped]

    > </fieldset>
    > </div>
    > </body>


    [snipped vast quantities of code I never looked at]

    >
    > It looks perfect in Firefox but in IE the loaderContainerClients div
    > will not layor on top of clients. It goes directly underneath.
    > Shouldnt the z-index take care of this?


    Try swapping the order of the DIVs in your source, so the right float
    comes *before* the left float:

    <div id="orderDiv" style="float: right; width:70%; height:500px;">
    <fieldset>
    ...blah blah and more blah...
    </fieldset>
    </div>
    <div id="clientsDiv" style="float: left; width:25%;">
    <fieldset>
    ...blah blah...
    </fieldset>
    </div>

    No, it's not intuitive, but IE rarely is.

    HTH.
    --
    John
    John Hosking, Mar 1, 2007
    #2
    1. Advertising

  3. Nate12o6

    Nate12o6 Guest

    I would love to give you a link to the live site, but it is a private
    box on our intranet.

    I swapped the order of the 2 divs but that did not work. Any other
    sugestions?

    -Thanks



    On Feb 28, 10:30 pm, John Hosking <>
    wrote:
    > Nate12o6 wrote:
    > > Im trying to layor one div over another but am having trouble. Take a
    > > look at the code snippet:

    >
    > Unless you've only got a two-line snippet (and even sometimes in that
    > case as well), it's generally better to simply provide a URL.
    >
    > > <body bgcolor="#ffffff" text="#000000" id="htmlsource">
    > > <div id="clientsDiv" style="float: left; width:25%;">
    > > <fieldset>

    >
    > [blah blah snipped]
    >
    > > </fieldset>
    > > </div>
    > > <div id="orderDiv" style="float: right; width:70%; height:500px;">
    > > <fieldset>

    >
    > [more blah snipped]
    >
    > > </fieldset>
    > > </div>
    > > </body>

    >
    > [snipped vast quantities of code I never looked at]
    >
    >
    >
    > > It looks perfect in Firefox but in IE the loaderContainerClients div
    > > will not layor on top of clients. It goes directly underneath.
    > > Shouldnt the z-index take care of this?

    >
    > Try swapping the order of the DIVs in your source, so the right float
    > comes *before* the left float:
    >
    > <div id="orderDiv" style="float: right; width:70%; height:500px;">
    > <fieldset>
    > ...blah blah and more blah...
    > </fieldset>
    > </div>
    > <div id="clientsDiv" style="float: left; width:25%;">
    > <fieldset>
    > ...blah blah...
    > </fieldset>
    > </div>
    >
    > No, it's not intuitive, but IE rarely is.
    >
    > HTH.
    > --
    > John
    Nate12o6, Mar 1, 2007
    #3
  4. On Mar 1, 9:19 am, "Nate12o6" <> wrote:
    > I would love to give you a link to the live site, but it is a private
    > box on our intranet.


    You can still put something out there that duplicates the problem.
    Search the group for "why we won't help you"
    Travis Newbury, Mar 1, 2007
    #4
  5. Nate12o6

    Nate12o6 Guest

    On Mar 1, 8:29 am, "Travis Newbury" <> wrote:
    > On Mar 1, 9:19 am, "Nate12o6" <> wrote:
    >
    > > I would love to give you a link to the live site, but it is a private
    > > box on our intranet.

    >
    > You can still put something out there that duplicates the problem.
    > Search the group for "why we won't help you"


    I got access to a public box. Here is a link to the problem page:

    http://70.154.152.139/custSelect.php

    Thanks for taking a look.
    Nate12o6, Mar 1, 2007
    #5
  6. On Mar 1, 9:48 am, "Nate12o6" <> wrote:
    > > > I would love to give you a link to the live site, but it is a private
    > > > box on our intranet.

    > > You can still put something out there that duplicates the problem.
    > > Search the group for "why we won't help you"

    > I got access to a public box. Here is a link to the problem page:
    > http://70.154.152.139/custSelect.php
    > Thanks for taking a look.


    Don't thank me, I don't have a clue, I just talk sh*t all the time and
    proclaim the awesome power of Flash. You have to get someone that
    really knows this stuff to answer your question. I was just telling
    you why they weren't answering it...
    Travis Newbury, Mar 1, 2007
    #6
  7. Nate12o6

    John Hosking Guest

    Nate12o6 wrote:
    > I got access to a public box. Here is a link to the problem page:
    >
    > http://70.154.152.139/custSelect.php
    >
    > Thanks for taking a look.
    >


    Great, thanks for posting the page.

    Unfortunately, it looks exactly the same to me in IE as it does in FF.
    Maybe that's because you don't seem to be using the
    loaderContainerClients you mentioned in your OP:

    ¦ It looks perfect in Firefox but in IE the loaderContainerClients div
    ¦ will not layor on top of clients. It goes directly underneath.

    In summary, I still don't understand what you're trying to do. Is the
    page you posted supposed to be showing the layering you're dreaming of?

    Not giving up yet...
    --
    John
    John Hosking, Mar 1, 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:
    423
    Karl Seguin [MVP]
    Jan 27, 2006
  2. et
    Replies:
    2
    Views:
    1,896
  3. dan
    Replies:
    25
    Views:
    1,320
    Uncle Bob (Robert C. Martin)
    Oct 28, 2003
  4. Universe
    Replies:
    1
    Views:
    470
    Universe
    Oct 24, 2003
  5. Dhananjay
    Replies:
    1
    Views:
    1,098
    sloan
    Dec 18, 2006
Loading...

Share This Page