positioning a dynamic div to cover an existing table

[evank]

I have a page where all the content is contained in one centered table of static size:

<table id="page_content" background="gfx/main_bg.gif" border=0 cellpadding=0 cellspacing=0 width=1024 height=768>
  <tr>
    <td>
      <!-- content goes here -->
    </td>
  </tr>
</table>

the page is fairly graphics-laden, so I want to hide it with a preload screen until the page is fully loaded. I'm attempting to do this by dynamically creating a div with a high z-index and absolute positioning, and putting it on top of said content table:

// get page content table
var contentTable = document.getElementById('page_content');

// create div and set id
var loadDiv = document.createElement('div');
loadDiv.id = 'loading_div';

// put in loading image
loadDiv.innerHTML = '<img src="gfx/loading.gif" width=1024 height=768>';

// do positioning and dimensions
loadDiv.style.position = 'absolute';
loadDiv.style.top = contentTable.offsetTop;
loadDiv.style.left = contentTable.offsetLeft;
loadDiv.style.zIndex = 100;

// insert into page
contentTable.parentNode.insertBefore(loadDiv,contentTable);

this doesnt exactly work, however...it puts the div near said table, but they dont line up exactly. am I missing something obvious?

[vikonava]

check for

loadDiv.style.top = contentTable.offsetTop;
loadDiv.style.left = contentTable.offsetLeft;

maybe the top and left, maybe coordinates are incorrect, which i am almost sure of that, try manually inserting the Top and Left coordinates by yourself instead of using contentTable.offsetTop and contentTable.offsetLeft

[evank]

the content table is centered within the page (which depends on screen size), and the layout uses default page margins (which seem to vary from browser to browser), so i cant know the exact top and left of the content before runtime.

any ideas on how to correctly calculate them?

[vikonava]

ok then calculate the them by adding or substracting to contentTable.offsetLeft and contentTable.offsetTop

do something like

// do positioning and dimensions
loadDiv.style.position = 'absolute';
correcttop = contentTable.offsetTop-100;
correctleft = contentTable.offsetLeft-100;
loadDiv.style.top = correcttop;
loadDiv.style.left = correctleft;

in which case you are gonna change the -100 for the amount your like to sustract or add like adding 50 example: correcttop = contentTable.offsetTop+50;
try to play withing the coding