aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Div positioning problem Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Div positioning problem" Watch "Div positioning problem" New topic
Author

Div positioning problem

Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Hi all,

I have the following script:



If the each loop runs twice, I expect two overlapping boxes, like this: attachment 1.jpg



But instead, I get this: attachment 2.jpg



What causes this behavior? Why won't they overlap?

Many thanks,

Mark



[Thumbnail for 1.JPG]

[Thumbnail for 2.JPG]

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You are setting top and left, but not setting the position.

Eric
Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Thanks for the reply,

I still haven't gotten it to behave the way I expect. I've tried:





and even



all to no avail.

Mark
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61656
    
  67

Have you inspected the computed CSS in a JavaScript Debugger?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Hi Bear,

Yeah, here's what it looks like on firebug:



Mark
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61656
    
  67

I mean the computed CSS. FireBug in FireFox or the built-in debuggers in Safari and Chrome will show you the actual CSS rules that were applied to the elements.
Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Hi Bear,

This 'computed style' concept is a new one for me. After some googling I came up with this:



I put this code in the $.each(...) loop and got this:

relative
10px
10px
relative
10px
10px

Mark
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61656
    
  67

Not what I mean...

Examine the following screen shot of the Chrome browser debugger's right pane:

Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Oh. Hehe. Here it is:

background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-top-color: white;
border-top-style: solid;
border-top-width: 1px;
color: white;
cursor: move;
display: block;
font-weight: bold;
height: 100px;
left: 10px;
position: relative;
top: 10px;

width: 100px;

Still getting the expected values.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61656
    
  67

I do not believe that relative is the droid position you're looking for.
Mark Baldwin
Greenhorn

Joined: Aug 04, 2011
Posts: 9
Wow Bear your Jedi mind trick worked on my browser. Setting position to 'absolute' did the trick. I don't know why I was set on 'relative' being correct. I still don't understand the behavior, but Many Thanks!

Edit: Premature celebration- the script only behaves correctly in Firefox. In Chrome, IE, and Opera, its behavior is the same as if position were set to relative.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6






Example Running
Mark Martinez
Greenhorn

Joined: Aug 25, 2010
Posts: 10
Eric,

That did the trick. You, sir, are a wizard.
 
wood burning stoves
 
subject: Div positioning problem