JavaScript offsetTop in brskalniki

Lep pozdrav,

za ugotavljanje pozicije vgnezdenega elementa DIV uporabljam javascript offsetTop parameter. Izmeril/testiral sem podatke v štirih brskalnikih (IE, FF, Chrome, Opera) in ugotovil, da IE izračuna oddaljenost od zgornjega roba s precejšnjo razliko od ostale trojice.

Link do testne strani: http://www.mojagostilna.com/offsetTest....

Moji podatki:

IE: prvi ->     DIV -> 22 : TD -> 3 : TABLE -> 15 : BODY -> 0    =    40px
   drugi ->     DIV -> 22 : TD -> 3 : TABLE -> 97 : BODY -> 0    =    122px

FF: prvi ->     DIV -> 22 : TD -> 3 : TABLE -> 8 : BODY -> 0     =    33px
   drugi ->     DIV -> 22 : TD -> 3 : TABLE -> 90 : BODY -> 0    =    115px

Opera: prvi ->  DIV -> 23 : TD -> 3 : TABLE -> 8 : BODY -> 0     =    34px
      drugi ->  DIV -> 23 : TD -> 3 : TABLE -> 90 : BODY -> 0    =    116px

Chrome: prvi -> DIV -> 22 : TD -> 2 : TABLE -> 8 : BODY -> 0     =    32px
       drugi -> DIV -> 22 : TD -> 2 : TABLE -> 90 : BODY -> 0    =    114px

To so razdalje po osi Y za oba obarvana kvadratka, ki ju vidite na zgornjem linku

Rezultati se razlikujejo pri vseh brskalnikih, ampak najbolj izstopa IE. Tako majhne razlike kot so pri ostalih brskalnikih so sprejemljive.

Kakšen predlog?

HTML:

<table border="1">
	<tr>
		<td>k</td>
		<td>
			<div style="padding-left: 30px; padding-top: 20px; border: solid 1px;">
				<div id="prvi" style="background-color: #335577; width: 30px; height: 50px;">k</div>
			</div>
		</td>
		<td><span id="prvi_podatki"></span></td>
	</tr>
</table>


<table border="1" width="1200">
	<tr>
		<td width="500">k</td>
		<td width="500">
			<div style="padding-left: 30px; padding-top: 20px; border: solid 1px;">
				<div id="drugi" style="background-color: #775533; width: 30px; height: 50px;">k</div>
			</div>
		</td>
		<td><span id="drugi_podatki"></span></td>
	</tr>
</table>

JavaScript:

function getYprvi()
{
	var iReturnValue = 0;
	var oElement = document.getElementById('prvi');
	while( oElement != null ) {
		document.getElementById('prvi_podatki').innerHTML = document.getElementById('prvi_podatki').innerHTML + " : " + oElement.nodeName + " -> " + oElement.offsetTop;
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function getYdrugi()
{
	var iReturnValue = 0;
	var oElement = document.getElementById('drugi');
	while( oElement != null ) {
		document.getElementById('drugi_podatki').innerHTML = document.getElementById('drugi_podatki').innerHTML + " : " + oElement.nodeName + " -> " + oElement.offsetTop;
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}
getYprvi();
getYdrugi();

Hvala za odgovore in lp, Sašo

poznam jQuery in ga uporabljam ko je le mogoče ... ampak v tem projektu ga ne morem ...

To ne bo šlo, ker bo JS koda ki jo pišem vključena na spletnih mestih, katerih sam ne nadzorujem....

Gre za storitev, ki bo omogočala nadzor nad tem, kateri del spletne strani je najbolj "gledan", katere vsebine uporabnike najbolj zanimajo itd itd... skratka, analiza za izboljšavo spletnega portala ... zato mora biti to JS koda ... noben iframe in tudi ne xml me ne rešijo ... tako da ne pušim v osnovi :)

Pozicija miške nima vpliva in je v "raziskavi" ne upoštevamo ... zalo zalo smo zašli iz prvotne teme ... ima kdo kakšno idejo oz. algoritem, ki v vseh browser-jih poda "pravilen" podatek o poziciji določenega tag-a?