<select> style?

[Guest_imported]

I have a popup calender that populates an <input> form field. However, there are two <select> boxes on my form also. I have assigned z-index of anything from 2 to 100 to the popup calendar but no matter what if it appears over the <select> box, that <select> box shows through the popup calender. I've tried applying a z-index to the select box through style and I can't get it to not appear on top of the popup calender.

Anyone have any ideas?

Here's some code:

Here's the beginning of the popup calendar:
<script language=&quot;JavaScript&quot;>

if (document.all) {
document.writeln(&quot;<div id=\&quot;PopUpCalendar\&quot; style=\&quot;position:absolute; left:0px; top:0px; z-index:7; width:200px; height:77px; overflow: visible; visibility: hidden; background-color: #FFFFFF; border: 1px none #000000\&quot; onMouseOver=\&quot;if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\&quot; onMouseOut=\&quot;ppcTI=setTimeout(\'hideCalendar()\',500)\&quot;>&quot;
document.writeln(&quot;<div id=\&quot;monthSelector\&quot; style=\&quot;position:absolute; left:0px; top:0px; z-index:9; width:181px; height:27px; overflow: visible; visibility:inherit\&quot;>&quot;}
else if (document.layers) {
document.writeln(&quot;<layer id=\&quot;PopUpCalendar\&quot; pagex=\&quot;0\&quot; pagey=\&quot;0\&quot; width=\&quot;200\&quot; height=\&quot;200\&quot; z-index=\&quot;100\&quot; visibility=\&quot;hide\&quot; bgcolor=\&quot;#FFFFFF\&quot; onMouseOver=\&quot;if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\&quot; onMouseOut=\&quot;ppcTI=setTimeout('hideCalendar()',500)\&quot;>&quot;
document.writeln(&quot;<layer id=\&quot;monthSelector\&quot; left=\&quot;0\&quot; top=\&quot;0\&quot; width=\&quot;181\&quot; height=\&quot;27\&quot; z-index=\&quot;9\&quot; visibility=\&quot;inherit\&quot;>&quot;}
else {
document.writeln(&quot;<p><font color=\&quot;#FF0000\&quot;><b>Error ! The current browser is either too old or too modern (usind DOM document structure).</b></font></p>&quot;}
</script>

Here's the selectbox and the style for it:

.selectbox { font-family: Verdana; font-size: 8pt; text-align: left; z-index: 1 }

<select class=&quot;selectbox&quot; name=&quot;Mechanic&quot;>
<cfoutput query=&quot;Mechanics&quot;>
<option value=&quot;#Mechanics.ID#&quot;>#Left(Mechanics.FirstName, 1)#. #Mechanics.LastName#</option>
</cfoutput>
</select>

 

[Guest_imported]

Nevermind. I went ahead and fixed it by using

document.formname.formfield.style.visibility = &quot;hidden&quot;

then made it re-appear when the calendar went away.

 

[tsdragon]

That was probably the best way. I've never had the problem, but from what I gather from reading postings here, a form element will always appear over other elements like that unless hidden. Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.