IE position of element with relative DIV and margin

Petra Meier · Jan 10, 2007

Hi,

I use the common code to determine the position of an element

getTop = function(o){
var nTop = null;
if(o){
do{
nTop += o.offsetTop;
o = o.offsetParent;
} while(o)
}
return nTop;
}
getLeft = function(o){
var nLeft = null;
if(o){
do{
nLeft += o.offsetLeft;
o = o.offsetParent;
} while(o)
}
return nLeft;
}

works fine as long I use Internet Explorer (version 6)
and want to get positions of elements that are in _relative_ DIVs that
have a _margin_ attached to it

i.e.

#mainDiv { position:relative ; top:115px ; margin-left:150px ;
margin-right:0px ;}

then the margins width (here left-margin) is also counted and my
position shifted to left by 150 pixels

any idea?

pm

Matt Kruse · Jan 10, 2007

Petra said:
I use the common code to determine the position of an element

The "common code" is not very robust.
Try the simple lib at
http://www.JavascriptToolbox.com/lib/objectposition/
and see if it gives you more accurate results.

If it doesn't, please point me to a test url so I can improve the library

Petra Meier · Jan 11, 2007

Hi Matt,

thanks for answering, but it did not work.. try yourself

<html>
<script type="text/javascript" src="/javascripts/dom.js"></script>
<style>
#idText { border:1px red solid ; }
#mainDiv { position:relative ; top:115px ; margin-left:150px ;
margin-right:0px ;}
</style>
<body>
<div id="mainDiv">
########<div id="idText">a text</div>############
</div>
</body>
</html>

any idea?

Matt Kruse · Jan 11, 2007

Petra said:
thanks for answering, but it did not work.. try yourself

I see - it finds the mainDiv correctly, but not the div inside of it. I will
have to work on a fix to the lib to handle cases like this. Here is my test
case:

<html>
<script type="text/javascript"
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv')); Position.set(document.getElementById('marker1'),pos); var pos=Position.get(document.getElementById('idText')); Position.set(document.getElementById('marker2'),pos);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com

Randy Webb · Jan 11, 2007

Matt Kruse said the following on 1/11/2007 11:49 AM:

I see - it finds the mainDiv correctly, but not the div inside of it. I will
have to work on a fix to the lib to handle cases like this. Here is my test
case:

<html>
<script type="text/javascript"
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv')); Position.set(document.getElementById('marker1'),pos); var pos=Position.get(document.getElementById('idText')); Position.set(document.getElementById('marker2'),pos);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com

If there were ever a case of a news agent hosing posted code that would
have to be the winner

For what it's worth, it seems to work properly in FF2 and O9.

Maybe this one won't get hosed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script
src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js">
</script>
<script type="text/javascript">
window.onload = function() { var
pos=Position.get(document.getElementById('mainDiv'));
Position.set(document.getElementById('marker1'),pos);
var pos=Position.get(document.getElementById('idText'));
Position.set(document.getElementById('marker2'),pos);
}
</script>
<style>
#idText { border:1px red solid ; }
#mainDiv {
position:relative ;
top:115px ;
margin-left:150px;
border:1pxsolid blue;
margin-right:0px ;
}
..marker {
position:absolute;
width:10px;
height:10px;
border:1px solid black;
}
#marker1 {
background-color:yellow;
}
#marker2 {
background-color:blue;
}
</style>
<body>
<div id="marker1" class="marker"></div>
<div id="marker2" class="marker"></div>
<div id="mainDiv">########
<div id="idText">a text</div>
############</div>
</body>
</html>

position of an element relative to the page	4	Oct 29, 2007
forms - extra padding/margin fix for IE	0	Mar 7, 2011
Help with my responsive home page	2	Dec 14, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
My code to get Y position of anchor - always null?	3	Jun 14, 2006
Trouble finding left/top offset position of a DIV when parent DIVhas a border	10	Mar 26, 2008
window.scrollTo	0	Apr 13, 2007
IE problems with movable div element	0	Apr 2, 2006

IE position of element with relative DIV and margin

Petra Meier

Matt Kruse

Petra Meier

Matt Kruse

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads