span's width and height are 0!

Hello

I am displaying the following span on the screen:

<span id="myspan" style="position:absolute; width:0px; height:0px; left:0px; top:0px; display:none; z-index:1000;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="bullet.png" width="16" height="16" style="vertical-align:top">
</td>
<td nowrap width="100%" style="padding-left:2px">
<a href="#" onclick="return false">View</a>
</td>
</tr>
<tr>
<td>
<img src="bullet.png" width="16" height="16" style="vertical-align:top">
</td>
<td nowrap width="100%" style="padding-left:2px">
<a href="test.html">Test</a>
</td>
</tr>
</table>
</span>

I set the body's style attribute to: position:relative
The span will get displayed on the screen as a trigger for some event. (where its final left and top attributes will be calculated and assigned, and it will then become visible)

for debug purposes, I am running the following on the onload event of the body:

var menu = document.getElementById('myspan');
var width = menu.offsetWidth;
var height = menu.offsetHeight;
alert("width: " + width + "'nheight: " + height);

For some reason, the values I am getting are 0!
Can anyone tell me what is wroing with my code?

I know that I set the width and height attribute to 0px when the span was defined because I don't know in advance what the actual dimensions of the span will be.

thanks

Why not remove the declaration of height and width properties in the span tag and let the browser calculate it based on the content? Anyway the actual size can be retrieved using the offsetWidth and offsetHeight properties.

...and, as I have told you in another forum :D , as long as the display is none, the object suppose to have no size at all, no matter if which it's real size is

Now since you've got a dilema, try setting negative x or y values instead of using "display:none" to move the span out of the field of view at least until you pick off the width and height.