Hi,

My apologies for cross-posting this one, but I'm not sure which area my problem falls in to!!

I am developping a site which is a web front-end to a management database. I have recently re-coded a lot of the site to now use a CSS and layers rather than the table I had previously used.

On my page, I have three layers across the top, then 1 down the left (which has a menu) and finally one in the bottom right (majority) of the screen to contain the main content of the page. I dynamically locate this one at page-load tiome so that it falls below the three at the top (which contain variable amounts of data).

On part of my site, I have the main content comprising of what behaves like a multi-tabbed dialog box. To achieve this, I have a series of layers which are located within the detail layer. The first contains the dialog header with the bottons in to flip between the tabs, the remainder are all located at the same place and contain the content of each tab. I then hide / show the layers as required.

All this works (you will be please to know!). My problem is that in the dialog header, I also have a drop-down menu. No matter what, this menu insists on appearing about 3" above where it should! If I put some fixed text on either side of the Select tags, this appears in the correct place, but the menu is still wrong

It gets worse.... If I then scroll the browser screen down a fraction (even 1 pixel will do) and then hover my mouse of the place that the menu should be, a second menu appears there! The original then becomes unusable and, if I switch screens from the browser and back again, it disappears all together.

I have other menus all over by dialogs and they don't do this.

Does anyone have any idea what's going on here? The basic html that generates this is...:

Code:
<div id="detail">
<DIV id="subheader">
<H2>Staff Information</H2>
<table border="1">
<TR>
<TD>
Type:&nbsp;
</TD>
<TD>
<INPUT type="radio" name="stftype" value="T" 
CHECKED onclick="javascript:document.theform.LectId.value='';document.theform.submit)"> Teaching ONLY </INPUT>
<INPUT type="radio" name="stftype" value="S"
onclick="javascript:document.theform.LectId.value='';document.theform.submit()"> Support ONLY </INPUT>
<INPUT type="radio" name="stftype" value="P"
onclick="javascript:document.theform.LectId.value='';document.theform.submit()"> Music Staff ONLY </INPUT>
<INPUT type="radio" name="stftype" value="B"
onclick="javascript:document.theform.LectId.value='';document.theform.submit()"> All Staff </INPUT>
</TD>
</TR>
<TR>
<TD>
Staff Member&nbsp;:&nbsp;
</TD>
<TD>
<SELECT name="LectId" id="LectId" onchange="javascript:document.theform.submit()">
{the various  options}
</SELECT>
</TD>
/TR>
<TR>
<TD colspan="2" Align="center">
{buttons which act as links for the tabs}
</TD>
<TR>
</TABLE>
</DIV>
<DIV ID='tab1' class='tabs' style='visibility:visible'>
I added the table and the border to enable me to see the screen layout and to see if it would anchor the menu - I'd be more than happy to lose it!

HELP!