не корректно работает свойство style.left

Спасибо за замечания. Правда они не приблизили меня к решению проблемы. Вот что сделать удалось:
Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body onload="init()">

<script>

function init()
{
	var div=document.getElementById("mainDiv");
	//div.innerHTML = window.navigator.appName;
	//alert(window.navigator.appName);	
	//if(window.navigator.appName != "Microsoft Internet Explorer") 
		CreateScrollHeader(div,true,true);	
}

//создает из любого дива, в котором находятся правильная (с thead и tbody) таблица 
//таблицу с фиксированной верхней строкой
//и левым столбцом
//При этом если второй параметр истина, то фиксируется левый стоблец, если третий истина, то верхняя строка.
//Т.е. возможна независимая фиксация.

//FYI алгоритм удобнее всего рассматривать в FireBug(плагин -отладчик для FireFox)
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
var divContent = null; //слой урезанный до размеров table body именно на нем стоят скролл бары
var divHeaderRow = null; //Слой со строкой заголовка (возможно несколько строк)
var divHeaderColumn = null; //Слой с крайней левой колонкой
var divHeaderRowColumn = null;//
var headerRowFirstColumn = null;//Угловая ячейка
var x;
var y;
var horizontal = false;
var vertical = false;
var childElement = 0;
horizontal = scrollHorizontal;
vertical = scrollVertical;
 
   if (content != null)
    {
		var left=0;
		var top=0;		
		var currentNode = content;
		while(currentNode)//Ищем координаты нашего слоя, для дальнейшего репозиционирования
		{				
			left += currentNode.offsetLeft;
			top += currentNode.offsetTop;	

			currentNode = currentNode.offsetParent;
		}

	    divContent = content;

	    if (divContent.childNodes[childElement].tagName == null)
	    {
		    childElement = 1;
        }

        var headerRow = divContent.childNodes[childElement].childNodes[childElement];
        x = divContent.childNodes[childElement].offsetWidth;
        y = divContent.childNodes[childElement].offsetHeight;

        divHeaderRow = divContent.cloneNode(true);
        if (horizontal)
        {		
            divHeaderRow.style.height = headerRow.offsetHeight + 1 + 'px';
            divHeaderRow.style.overflow = "hidden";

		//Вставляем заголовок, и поднимаем контент наверх, пряча его заголовк за нашим новым.
            divContent.parentNode.insertBefore(divHeaderRow, divContent);
            divContent.childNodes[childElement].style.position = "relative";
            divContent.childNodes[childElement].style.top = "-" + String(headerRow.offsetHeight + 1) + 'px';
		
            y = y - headerRow.offsetHeight;
        }

        divHeaderRowColumn = divHeaderRow.cloneNode(true);
        headerRowFirstColumn = headerRow.childNodes[childElement].childNodes[childElement];
        divHeaderColumn = divContent.cloneNode(true);
        divContent.style.position = "relative";

        if (vertical)
        {
            //Создаем левый столбец.		
		divContent.parentNode.insertBefore(divHeaderColumn, divContent);
		
		divHeaderColumn.style.position = "absolute";
		divHeaderColumn.style.left = left + 'px';
            
		Позиционируем наш контент правее фиксированного столбца, и ниже заголовка
		divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';
		divContent.style.top = -divContent.style.top + 'px';
		
            divContent.childNodes[childElement].style.position = "absolute";
            divContent.childNodes[childElement].style.left = -headerRowFirstColumn.offsetWidth + 'px';
		
        }
        else
        {
            divContent.style.left = "0px";
        }

        if (vertical)
        {
            //урезаем слой до размеров столбца и прячем скролы
		divHeaderColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
            divHeaderColumn.style.overflow = "hidden";
            divHeaderColumn.style.zIndex = "99";
           
		//Добавляем синхнонизацию на скролирование. 
            addScrollSynchronization(divHeaderColumn, divContent, "vertical");
            x = x - headerRowFirstColumn.offsetWidth;
        }

        if (horizontal)
        {
            if (vertical)
            {
			//Создаем верхнюю угловую ячейку
                divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
			//Выравниваем наш контент, делаем так чтобы скролбары были вне таблицы.
		    divContent.style.width = String(divContent.offsetWidth - headerRowFirstColumn.offsetWidth + 17) + 'px';
		    divContent.style.position = "absolute";
                divContent.style.top = String(top + divHeaderRow.offsetHeight) + 'px';
                divContent.style.left = String(left + divHeaderColumn.offsetWidth -1) + 'px';
		    divContent.style.height = String(divContent.offsetHeight + 17) + 'px';			
            }
		//Позиционируем верхнюю угловую ячейку
            divHeaderRowColumn.style.position = "absolute";
            divHeaderRowColumn.style.left = left+ 'px';
            divHeaderRowColumn.style.top = top + 'px';
            divHeaderRowColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
            divHeaderRowColumn.overflow = "hidden";
            divHeaderRowColumn.style.zIndex = "100";
            divHeaderRowColumn.style.backgroundColor = "#ffffff";
        }

        if (horizontal)
        {
		//Добавляем синхроницацию по скролированию.
            addScrollSynchronization(divHeaderRow, divContent, "horizontal");
        }

        if (horizontal || vertical)
        {
            
        }
    }
}

// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};

}

// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}

fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}

</script>
<br/>
<br/>
<div style="width:500; height:500;" align="center">
<div id="mainDiv" style="height:300px; width:300px; overflow:auto;">
<table border="1" style="border-collapse:collapse;">
<thead>
    <tr>
        <th>sdasfasdfasdfds</th>

        <th>sasdfasdsdfdds</th>
        <th>sdasdfasdfds</th>
        <th>sdasdfasdfasdfasdfds</th>
        <th>sdasdfasdfds</th>
        <th>sdasadfasdfds</th>
        <th>sdasdfasdfds</th>

        <th>sdasadfasdfds</th>
    </tr>
</thead>
<tbody>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>

    <tr>	
	<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>	
   </tr>
</tbody>

</table>
</div>
</div>
</body>
</html>