Javascript menu and HTML forms

[Slav]

Hello,

I'm trying to put a menu on a page containing a select form. The
code for the menu I took from

http://dynamicdrive.com/dynamicindex1/topnavbar.htm

and the form is in the code snippet is as follows:

<form action="names.html" enctype="multipart/form-data"
method="post" name="mainform">
<table xmlns="" cellpadding="5" class="maintable"
style="z-index:1;">
<caption></caption>
<tr>
<td class="control_label;">Name</td>
<td class="value" style="z-index:1;">
<select name="name" style="z-index:1;"
onchange="document.mainform.submit()">
<option>Paul</option>
<option>Peter</option>
</select>
</td>
</tr>
</table>
</form>

PROBLEM IS: that the menu subitems are displayed behind the select
part of the form. Meaning that the submenus show up before the text
"Name" and behind the select form containing the names Paul and Peter.
This is very annoying!!

As you can see, I went a bit nuts by putting the z-index CSS
specification everywhere to see if I can place the submenus ahead of
the everything else but so far it has not helped. Any ideas?

Thanks in advance!

Slawek

 

[Grant Wagner]

PROBLEM IS: that the menu subitems are displayed behind the select
part of the form. Meaning that the submenus show up before the text
"Name" and behind the select form containing the names Paul and Peter.
This is very annoying!!

The <select> element is a windowed element, it will appear on top of
every other element regardless of z-index.

<url: http://support.microsoft.com/default.aspx?scid=kb;en-us;177378 />

Two suggestions:

1) move the <select> so it doesn't conflict with the other dynamic
elements on the page
2) detect when the dynamic elements and the <select> are in conflict and
set -display:none- on the select
3) when the dynamic element appears, set -display:none- on the <select>
until the dynamic element closes

 

[slawek_jarosz]

Thanks Grant! Would have not been able to figure that out...