JavaScript y type problem

[alcOrtholite]

I am having trouble with my Javascript menus. Its not the Javascript that is the problem. Its the fact that whenever my javascript menu drops down, the menu pane falls behind HTML controls on my web page (controls such as the select control).

I have heard there is a way of getting around this by using a combination of iframes and div sections, but I have not found an adequately demonstrated example of how they are used.

Can anyone tell me how to get around this problem. It would be much appreciated as it is driving me completely bonkers!

Thank you in anticipation

Al c

P.S I have attached a picture so you can visualise the problem

[professorX]

You can try to set all form's elements in other div.
And write z-index in divs.

[alcOrtholite]

I have tried this already, but because the select control is layered onto the web page, it is not treated as part of the z-index of the HTML.

Apparently, there is a way of getting round this by using iFrames and DIV tags, but I am not sure what!

Rgds

Al c

[professorX]

may be, then You set select down (under menu)...

[alcOrtholite]

No amount of z-ordering seems to work. Does anyone know how I can implement an iFrame to somehow get over this problem.

Any iFrame experts, speak now and never hold your peace!!!

Al C.

[Thread1]

I'm not an IFRAME expert, but ah the SRC property of the IFRAME seems to require a page so you have to create another page for the menu table. And make sure that you turn off any scrolling, borders and margins of the IFRAME to retain the menu apperance.

Sample script:)

main page :

<select style="z-index:0;">
<option>hello 1
<option>hello 2
</select>

<iframe name="ifra" id="ifra" style="position:absolute; left:1; top:1; z-index:1;" src="menu.asp"
marginheight="0px" marginwidth="0px" scrolling="no" frameborder="0px">
</iframe>



menu.asp :
<script for="window" event="onload()" language="javascript">
window.frameElement.width = document.all("tabMenu").offsetWidth;
</script>

<table id="tabMenu" border="1" bgcolor="whitesmoke" cellspacing="0">
<tr bgcolor="green"><td>Menu 1</td></tr>
<tr bgcolor="green"><td>Menu 2</td></tr>
</table>

[alcOrtholite]

Thanks for the reply. After implementing your code, it produces a fixed menu over the select control. What I am after is a drop down menu that is not obscured by the select control when it is clicked on as shown in the original picture i sent with this post. Is there any way to resize an iFrame to cover the drop down menu?

I have seen somewhere that using a combination of iFrames and DIV tags can resolve this problem. I just do not know how to implement such a solution as there are no clear examples/demonstrations of this occuring.

If anyone has the code, this would be much appreciated. Getting desperate!

Kind Regards