Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > trouble with div layer

Reply
Thread Tools

trouble with div layer

 
 
Nate12o6
Guest
Posts: n/a
 
      02-28-2007
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.

 
Reply With Quote
 
 
 
 
John Hosking
Guest
Posts: n/a
 
      03-01-2007
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
 
Reply With Quote
 
 
 
 
Nate12o6
Guest
Posts: n/a
 
      03-01-2007
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 <(E-Mail Removed)>
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



 
Reply With Quote
 
Travis Newbury
Guest
Posts: n/a
 
      03-01-2007
On Mar 1, 9:19 am, "Nate12o6" <(E-Mail Removed)> 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"

 
Reply With Quote
 
Nate12o6
Guest
Posts: n/a
 
      03-01-2007
On Mar 1, 8:29 am, "Travis Newbury" <(E-Mail Removed)> wrote:
> On Mar 1, 9:19 am, "Nate12o6" <(E-Mail Removed)> 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.

 
Reply With Quote
 
Travis Newbury
Guest
Posts: n/a
 
      03-01-2007
On Mar 1, 9:48 am, "Nate12o6" <(E-Mail Removed)> 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...

 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      03-01-2007
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
 
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
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
business layer, data access layer , presentation layer for asp.net using C#.net Dhananjay ASP .Net 1 12-18-2006 11:35 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
difference b/w layer 2 switch and layer 3 switch praveen Cisco 1 10-22-2003 07:19 AM



Advertisments