table in hidden div still appears

[RippedOnNitro]

Good morning,

On my website I want a centered popup where you can fill in a webform. Ofcourse I want to use a table for it so it can have a nice layout.

However when I use a "div" which I can show or hide via a Javascript (showhide) and I put a table in that div, then the webform in that table is already show on the upper left side of my website. If I click the link to show the div, only a blank div will appear in the center of my screen.

This is the code I used:

<script type="text/javascript">
function showhide(id) {
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display='none';
}
else
{
document.getElementById(id).style.display='block';
}
}
</script>

<div id="test" style="display:none; position: absolute; width: 600px; height: 300px; display: none; background: url('tableupperleft.bmp') repeat-x; border: 1px solid #000; left: 50%; margin-left: -300px; top: 50%; margin-top: -150px;">

<table>
<tr>
<td align="center">TEST</td>
</tr>
</table>
</div>

<a href="javascript:showhide('test')"><img src="iconadd.bmp"></a>

In this case the word "TEST" will appear in the upperleft of my screen while the div is hidden. If I click the link, a blank div will appear in the center of the screen.

If I don't use a table, bu only the word "TEST", then all works fine like it supposed to be.

So I guess the issue is the <table>-function?

What am I doing wrong?

[RippedOnNitro]

Problem has been solved...