Overlapping elements don't quite match

[Andrew Poulos]

I have two DIVs. Both are absolutely positioned (and have the same width
and height). One in BODY and one nested within other absolutely
positioned DIVs.

I'm trying to position one exactly over the top of the other.

In Firefox and Chrome the DIVS never overlap exactly. If I change the
size of the DIV borders how much the overlap misses also changes.

In IE they do overlap exactly.

How can I get it to overlap exactly cross browser?

Here's a link to a sample page which displays the issue I'm having:
<url: http://members.iinet.net.au/~apoulos/overlapping.htm >


Andrew Poulos

 

[rf]

I have two DIVs. Both are absolutely positioned (and have the same
width and height). One in BODY and one nested within other absolutely
positioned DIVs.

which have borders which you didn't take into account when you were
calculating the positions.

I'm trying to position one exactly over the top of the other.
Why?

In Firefox and Chrome the DIVS never overlap exactly. If I change the
size of the DIV borders how much the overlap misses also changes.

In IE they do overlap exactly.

No they don't

How can I get it to overlap exactly cross browser?

Change your approach?

 

[Andrew Poulos]

which have borders which you didn't take into account when you were
calculating the positions.

Isn't offsetLeft supposed to return the position to the upper left edge
of an element, and aren't an element's borders part of the element?

Why?

Its part of a puzzle game I'm working on.

No they don't

In IE 8 and Opera 9 they do.

Change your approach?

To what?

Andrew Poulos

 

[rf]

Isn't offsetLeft supposed to return the position to the upper left
edge of an element,

The upper left of the elements *content*.

and aren't an element's borders part of the
element?

No not for the purpose to hand. If you look at the CSS specifications you
will find that with what you are doing the positioning is *specified* as
being from the /padding edge/ of the containing element.

You may be confused with IE's broken box model when operating in quirks
mode.

Its part of a puzzle game I'm working on.


In IE 8 and Opera 9 they do.

IE6 and IE7 don't and there are far more of them than IE8 and Opera

To what?

Who knows. You have not specified what sort of puzzle game it is. If it's
chess or Sudoku then a table. If it's a shoot-em-up game then SVG/VML.

This is not a JavaScript question. You will get better answers over in a
stylesheet group, once you define exactly what you are trying to achieve.

 

[Andrew Poulos]

The upper left of the elements *content*.

Not according to MSDN
<url: http://msdn.microsoft.com/en-us/library/ms534200(VS.85).aspx >
or Mozilla Developer
<url: https://developer.mozilla.org/en/DOM/element.offsetLeft >

Here you can see that offsetWidth includes the width of any borders:

No not for the purpose to hand. If you look at the CSS specifications you
will find that with what you are doing the positioning is *specified* as
being from the /padding edge/ of the containing element.

You may be confused with IE's broken box model when operating in quirks
mode.

Perhaps but the page in question is in standards mode.

One site I just googled claims:
"Each element's offsetLeft property is apparently calculated from the
offsetParent's inner border edge."

IE6 and IE7 don't and there are far more of them than IE8 and Opera
So?


Who knows. You have not specified what sort of puzzle game it is. If it's
chess or Sudoku then a table. If it's a shoot-em-up game then SVG/VML.

My question, reworded so there's less confusion, is how to use
javascript to place one DIV exactly over the top of another DIV in a
cross browser way.

Andrew Poulos

 

[rf]

Not according to MSDN
<url: http://msdn.microsoft.com/en-us/library/ms534200(VS.85).aspx >
or Mozilla Developer
<url: https://developer.mozilla.org/en/DOM/element.offsetLeft >

Here you can see that offsetWidth includes the width of any borders:
<url: https://developer.mozilla.org/en/DOM/element.offsetWidth >

Ah, I remember now.

Google for: offsettop border

You will find a plethora of hits discussing the fact that
offsettop/offsetleft and borders don't go together. It appears that nobody
is playing the game correctly.

I found this several years ago when building CSS dropdown menus and at that
time decided that I would never cause a containing element to have a border
or padding. Put something *in* there that has borders and padding, sure, but
don't apply them to the containing element.

If you do it the way you are then you must be prepared to a) take your
borders into account and b) recognise that some browsers do it one way and
some do it another way.

So?

So if you want your game to work with the majority of browsers in use then
you should cater to IE7, for the time being, IE6.

My question, reworded so there's less confusion, is how to use
javascript to place one DIV exactly over the top of another DIV in a
cross browser way.

Read that google result list.

Wild ideas from outside the triangle:

When you position the green div change it's parent to the same containing
element as the red div. You don't have to walk the offsetParent chain then,
simply give them the same top: and left:.

If your intention is to hide whatever is in the red div with the contents of
the green one, simply replace the contents of the red div with whatever is
in the green div.


More information about *what* you are doing (and not just getting two divs
in the same place) is required. Don't ask for a fix for some hassle you are
having with your percieved solution to your problem. Present the problem up
front. There may be far better ways of doing it.

 

[Thomas 'PointedEars' Lahn]

My question, reworded so there's less confusion, is how to use
javascript to place one DIV exactly over the top of another DIV in a
cross browser way.

You can't (save that there's no "javascript"). You use CSS instead.


PointedEars