Netscape 7.1 with DIV

Hello,
I have implemented the activewidget on our enterprise application, and must say that it has been the highlight of our latest release. The only problem I am having is related to a dropdown menu...

we have a toolbar above the activeui grid, which interacts with the selected items...when clicking on our tools button a div becomes visible, which overlaps the activegrid.

In IE, the menu works correctly, however in Netscape once you mouse over the area of the menu which overlaps the activegrid, the menu disappears...seems that an onMouseOut event is being triggered somehow...


<!-- Action bar -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr bgcolor="#D4D0C8" >
<td background="inv_enh_images/actionBarBack.gif">&nbsp;
<a href="javascript:callAction('new')" onMouseOver="swapOver('new')" onMouseOut="swapOut('new')"> <img name="IMG_new" src="inv_enh_images/bt_new3.gif" border="0"></a>
<a href="javascript:callAction('edit')" onMouseOver="swapOver('edit')" onMouseOut="swapOut('edit')"> <img name="IMG_edit" src="inv_enh_images/bt_edit3.gif" border="0"></a>
<a href="javascript:callAction('download')" onMouseOver="swapOver('download')" onMouseOut="swapOut('download')"> <img name="IMG_download" src="inv_enh_images/bt_download3.gif" border="0"></a>
<a href="javascript:callAction('upload')" onMouseOver="swapOver('upload')" onMouseOut="swapOut('upload')"> <img name="IMG_upload" src="inv_enh_images/bt_upload3.gif" border="0"></a>
<a href="javascript:callAction('refresh')" onMouseOver="swapOver('refresh')" onMouseOut="swapOut('refresh')"> <img name="IMG_refresh" src="inv_enh_images/bt_refresh3.gif" border="0"></a>
<a href="javascript:callAction('delete')" onMouseOver="swapOver('delete')" onMouseOut="swapOut('delete')"> <img name="IMG_delete" src="inv_enh_images/bt_delete3.gif" border="0"></a>
<a href="javascript:callAction('tools')" onMouseOver="swapOver('tools')" onMouseOut="swapOut('tools')"> <img name="IMG_tools" src="inv_enh_images/bt_tools3.gif" border="0"></a>
</td>
</tr>
</table>

<!-- Tool bar -->
<div name="toolbarmenu" id="ToolsLayer" style="position:absolute; width:112px; height:115px; z-index:999; visibility:hidden; left: 432px; top: 28px;" onMouseOver="showTools()" onMouseOut="hideTools()">
<table border="0" cellpadding="0" cellspacing="0" class="dropdownmenu">
<tr><td><a href="javascript:callAction('edit_assignment')" onMouseOver="swapOver('edit_assignment')" onMouseOut="swapOut('edit_assignment')"> <img name="IMG_edit_assignment" src="inv_enh_images/drop/btd_edit-assign3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('comments')" onMouseOver="swapOver('comments')" onMouseOut="swapOut('comments')"> <img name="IMG_comments" src="inv_enh_images/drop/btd_comments3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('create_alternate')" onMouseOver="swapOver('create_alternate')" onMouseOut="swapOut('create_alternate')"> <img name="IMG_create_alternate" src="inv_enh_images/drop/btd_create_alternate3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('email_file')" onMouseOver="swapOver('email_file')" onMouseOut="swapOut('email_file')"> <img name="IMG_email_file" src="inv_enh_images/drop/btd_email3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('history')" onMouseOver="swapOver('history')" onMouseOut="swapOut('history')"> <img name="IMG_history" src="inv_enh_images/drop/btd_history3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('introduction')" onMouseOver="swapOver('introduction')" onMouseOut="swapOut('introduction')"> <img name="IMG_introduction" src="inv_enh_images/drop/btd_introduction3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('event_stats')" onMouseOver="swapOver('event_stats')" onMouseOut="swapOut('event_stats')"> <img name="IMG_event_stats" src="inv_enh_images/drop/btd_summary_view3.gif" border="0"></a></td></tr>
<tr><td><a href="javascript:callAction('project_setup')" onMouseOver="swapOver('project_setup')" onMouseOut="swapOut('project_setup')"> <img name="IMG_project_setup" src="inv_enh_images/drop/btd_project-setup3.gif" border="0"></a></td></tr>

<%if (Config.getBoolean("CARRIER_REPOSITORY_ON", true)) {%>
<tr><td class="dropdownmenuitem"><a href="javascript:callAction('archive_event')" onMouseOver="swapOver('archive_event')" onMouseOut="swapOut('archive_event')"><img name="IMG_archive_event" src="inv_enh_images/btd_archive_event1.gif" border="0"></a></td></tr>
<%}%>
</table>
</div>

Grid uses mouseover/mouseout events for the mouseover effects in column headers (xp skin). I cannot see why it affects your menu - maybe you have to check event propagation phase in your code and skip bubbling phase?