Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Div positioning problem

 
Mark Baldwin
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

1.JPG
[Thumbnail for 1.JPG]
2.JPG
[Thumbnail for 2.JPG]
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You are setting top and left, but not setting the position.

Eric
 
Mark Baldwin
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65113
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have you inspected the computed CSS in a JavaScript Debugger?
 
Mark Baldwin
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Bear,

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



Mark
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65113
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65113
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Not what I mean...

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

 
Mark Baldwin
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65113
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I do not believe that relative is the droid position you're looking for.
 
Mark Baldwin
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator






Example Running
 
Mark Martinez
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric,

That did the trick. You, sir, are a wizard.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic