Hello, I have written a page that is something like this:
HTML Code:
<!DOCTYPE html>
<meta charset="UTF-8">
	#imgframe {
		width: 950px;
		height: 600px;
		border: solid 1px #8AC007;
		overflow: hidden;
		cursor: move;
		margin: 0;
		padding: 0;

	#innercont {
		width: 1994px;
		height: 1144px;
		border: 0;
		padding: 0;
		margin: 0;
		background: url('img/map.jpg');
		position: relative;
		left: -600px;
		top: -300px;

	.marker {
		position: absolute;
		cursor: pointer;
		height: 7px;
		width: 7px;
		background: url('img/marker.png') no-repeat;

function displayattr() {
	var xs = document.getElementById("innercont").style.left;
	var x = Number(xs.replace("px",""));
	var ys = document.getElementById("innercont").style.top;
	var y = Number(ys.replace("px",""));
	var sum = x + ", " + y;

<div id="imgframe">
	<div id="innercont" class="dragme">
		<a class="marker" style="left: 1300px; top:864px;" onclick="movepos(1300, 864)"></a>

<button type="button" onclick="displayattr()">Test</button>

The problem with this code is that in the style the position of the div id="innercont" is set to: left: -600px and top: -200px;, but when I use document.getElementById("innercont").style.top(left) it returns top=0; left=0.
I can solve this problem by adding an onload function to the body tag of the page, that will set the initial position exactly where I want by using "document.getElementById("innercont").style.top(left)" instead of css top and left, but I don't want to, since that would mess my other functions.
If anyone has had the same problem I would be more than happy to share their solutions.
Thanks in advance.
B. Chavdarov