help with css and dhtml menu and form problem

[mark | r]

anyne help me solve this problem.

you access www.sicl.neue.co.uk/about/questionnaire.asp and roll over the
technology or services menu, the slidedown menu goes beneath the select box
in the form below?

mark

 

[rf]

anyne help me solve this problem.

you access www.sicl.neue.co.uk/about/questionnaire.asp and roll over the
technology or services menu, the slidedown menu goes beneath the select box
in the form below?

There is nothing you can do to stop this. The select box is a seperate
Windows window, a child window of the browsers client window and so
therefore lives in front of anything on the browsers window. This is an
operating system requirement.

There are two workarounds:

Organize your page so that the dropdown never goes near any select elements,
or other form elements for that matter.

Make the form elements invisible while the dropdown is active.

 

[altamir]

[...]

Make the form elements invisible while the dropdown is active.

and show an image which is a screen capture of those elements.

 

[rf]

[...]

Make the form elements invisible while the dropdown is active.

and show an image which is a screen capture of those elements.

What? Why would I need to do that?

The OPs menu system is driven by javascript. It would be a trivial matter to
alter the style of the offending select elements to invisible when a
dropdown occurs, and to alter it back to visible when the dropdown is
dismissed. An, er, excercise for the student

 

[Toby Inkster]

There is nothing you can do to stop this. The select box is a seperate
Windows window, a child window of the browsers client window and so
therefore lives in front of anything on the browsers window. This is an
operating system requirement.

Depends on the browser. Opera and Mozilla render form controls themselves
rather than falling back on the OS's widgets. This allows them to overlay
other elements.

Try this:
<style type="text/css">
span {
color:green; background:yellow;
position:relative; top:-0.6em; left:1em;
}
</style>
<select>
<option>foobar</option>
<option>corge</option>
</select><br>
<span>quux</span>

Tested and overlays in Mozilla 1.6 and Opera 7.53 for Linux.