Misbehaving <Select>

[pauls]

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...:

<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!

[Vincent Puglia]

Hi Paul,

You are going to have to supply a url; the select box appears where it's supposed to in the code you supplied.

You did, however, leave out a opening parens in the first submit statement.
Also, you neglected to include the form tag.
Finally, you could recode it so that either you call a function onclick (I'm presuming the only diff between the 3 radios is the value you are inserting)

onclick='doit(someValue, this.form)'
 
function doit(val, formObj)
{
  formObj.LectId.value = val;
  formObj.submit();
}

or write it as:

onclick="javascript: this.form.LectId.value = ''; this.form.submit()"> 

Vinny
Vinny

[pauls]

Vinny,

Thanks for getting back to me...

Unfortunately, I can't provide a URL because this site is internal-use only (sensitive data - blah blah blah). If all else fails, I'll have to try to publish a sanitized version of it.

What complicates matters further is that everything (graphics, CSS etc.) is generated dynamically using php (!).

The missing '(' was a typo in my posting.

The other tags (FORM etc) are all there and tested - they come from a header file that is shared with other pages which do work ok.

[Vincent Puglia]

Hi Paul,

sensitive data - blah blah blah

You people teaching the girls to be spies???

Upon relooking at the code you posted: You open 2 divs at the top, but only close one at the bottom before opening a 3rd. If it's not a typo, bad form, tsk tsk -- or should that be click click? (shades of Dominican nuns)

Vinny

[pauls]

Nah, but it's got addresses and names and other personal stuff on it!

The third div is the first of the tab contents I mentioned.

Anyway, I fixed it! In the CSS is I took out the positioning stuff for the Subheader div and it started to work. No idea why, but there you go! All very odd!

Thanks for looking at it for me tho'!

Paul

[Vincent Puglia]

You're welcome

Vinny