Centering content - Tables and CSS

Hi,

I'm trying to setup a page on which the content is centered both horizontally and vertically. My approach:

I use one table, set to 100% width and height and inside of it another one-cell table set to a fixed width and height. This centers the entire content of the page.

Now, within that centered cell, I need to use DIV's as well. Below code works for me in NS (i.e. the DIV's stay aligned with the background image) but in IE, the DIV's shift vertically on resize.

Here's the code:

<div id="container" style="position:absolute; align=center; height:100%; width:100%">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="750" height="479">
<tr>
<td background="images/bg.png">

<div id="box1" style="position: relative; left: 40px; top: -60px;">
<img src="images/nav1.gif" width="50" height="12"></div>
<div id="box2" style="position: relative; left: 100px; top: -72px;">
<img src="images/nav2.gif" width="50" height="12"></div>
<div id="box3" style="position: relative; left: 160px; top: -84px;">
<img src="images/nav3.gif" width="50" height="12"></div>

</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</center>
</div>

As far as I understand this has to do with IE's bug when using a combination of tables and relative positioning. Wonder if anyone knows a workaround WITHOUT!!! extensive JavaScript. I know it can be done with JS, but it's a rather dirty hack ...

Any help greatly appreciated.
Thanks
Diego

This might help. It will give you a layer in "around about" the center of the page.

<div id="container" style="position:absolute; top:50%; left:50%">

You should be able to put a smaller table/div inside this container with some negative top and left values to get the centering correct of the content...kinda like what you've been doing already.

You sure made my day!!!

Just in case anyone is interested, here's the code:

<div id="container" style="position:absolute; top:50%; left:50%">

<div style="position:relative; top:-240px; left: -375px">
<div style="position:absolute; width 750px; height 479px; top:0px; left: 0px">

<img src="images/bg.png" width="750" height="479">
<div id="box1" style="position: absolute; left: 250px; top: 200px; height: 300px; width: 200px;">
<img src="images/nav1.gif" width="50" height="12"></div>
<div id="box2" style="position: absolute; left: 100px; top: 80px;">
<img src="images/nav2.gif" width="50" height="12"></div>
<div id="box3" style="position: absolute; left: 160px; top: 100px;">
<img src="images/nav3.gif" width="50" height="12"></div>

</div>
</div>

</div>

Doesn't work in Netscape ... but I couldn't care less as I already got a solution for NS.

Thanks again!!!
Diego