offsetLeft/Top is 0 when inside of tables in IE 5

[wac]

I'm coding up a javascript menu from the following HTML and style sheet:

Things work perfectly (or reasonably well) outside of a portal (ie independent HTML).

The javascript code goes through the DIVs and sets the position of the popup menus by looking at offsetLeft and offsetTop of the
parent (menu) and setting the style.left and style.top of the popup (submenu). This works fine outside of a portlet.
Within a portlet things only work within Netscape 6.
In IE 5, I always get 0 for the offsetLeft and offsetTop of the menu, so my popups all occur at position (0,0) within the menubar DIV. Does anyone have an idea as to why this might not be working? Should I be looking at a different variable for IE???

Within the portlet, everything is embedded in a massive table, which has tables embeded within it. Is there something wierd happening with IE when things are inside tables????
===STYLESHEET===
.menubar, .submenu, .menuitem
{
background-color: #cccc00 ;
z-index: 0 ;
border-style: outset
}

.menubar
{
position: relative ;
}

.submenu
{
position: absolute ;
visibility: hidden ;
width: 100
}

.menuitem, .menu
{
border-style: none ;
cursor: pointer;
cursor: hand ;
}


===HTML===
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div id="m1" class="menubar">
<table>
<tr>
<td class="menu">File
<div class="submenu">
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td class="menuitem">Open</td></tr>
<tr><td class="menuitem">Print</td></tr>
<tr><td class="menuitem">Save</td></tr>
<tr><td><hr></td></tr><!-- separator -->
<tr><td class="menuitem">Exit</td></tr>
</table>
</div>
</td>
<td class="menu">Edit
<div class="submenu">
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td class="menuitem">Cut</td></tr>
<tr><td class="menuitem">Copy</td></tr>
<tr><td class="menuitem">Paste</td></tr>
<tr><td><hr></td></tr><!-- separator -->
<tr>
<td class="menu">Select
<div class="submenu">
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td class="menuitem">Item 1</td></tr>
<tr><td class="menuitem">Item 2</td></tr>
<tr><td class="menuitem">Item 3</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td class="menu">View
<div class="submenu">
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td class="menuitem">Icon</td></tr>
<tr><td class="menuitem">List</td></tr>
<tr><td class="menuitem">Detail</td></tr>
</table>
</div>
</td>
<td class="menu">Help
<div class="submenu">
<table cellpadding=0 cellspacing=0 width=100%>
<tr><td class="menuitem">Contents</td></tr>
<tr><td class="menuitem">Index</td></tr>
<tr><td><hr></td></tr><!-- separator -->
<tr><td class="menuitem">Product information</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>

[newbiedude]

Many browsers get grumpy when handling code inside table cells, particularly javascript and particularly with nested tables.

Have you tried to build the table in bit/pieces -- get rid of the <div> tags and other tags, maybe just using a variety of cell bgcolors to determine which table or part thereof breaks, then build the page back up slowly until you find what breaks it.

newbiedude

[Roy Sinclair]

Here's (http://www.webreference.com/dhtml/diner/realpos1/) an article which explains how to get/set the position in great detail and provides code you can use too.