trouble with div layer

N

Nate12o6

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

John Hosking

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

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>
Click to expand...

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

[more blah snipped]
</fieldset>
</div>
</body>
Click to expand...

[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?
Click to expand...

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

Nate12o6

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



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

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>
Click to expand...

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

[more blah snipped]
</fieldset>
</div>
</body>
Click to expand...

[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?
Click to expand...

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.
Click to expand...
 
T

Travis Newbury

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

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

Travis Newbury

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.
Click to expand...

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

John Hosking

Nate12o6 said:
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.
Click to expand...

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

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

Trouble with css 4
Help with my responsive home page 2
Clickable Div Block 1
Please Help? 0
Help with Visual Lightbox: Scripts 2
? Trouble with: passing dragElement(e.target.id); 8
Align img inside nav tabs section 5
Positioning CSS components 1

Members online

Total: 32 (members: 3, guests: 29)
Robots: 471

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top