select box overlap in IE6

[jwhite68]

I have a "classic" problem which I have so far been unable to successfully implement a workaround in.

I have a drop down menu, which when selected overlaps a drop down combo box- so you actually see the combo box 'ON TOP' of the menu drop down. But the menu is supposed to be on top of the combo box - ie overlapping it - but it isnt in IE6. Because z-index doesnt work with a combo box, I have been searching for a workaround.

My combo box has the name usercat.

I did try the following based on something I found but it doesnt work.

I put this in the HEAD section.

<script type="text/javascript">
	window.onload = function() {clearPreloadPage(); }
</script>
  <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
	function clearPreloadPage() 
	{ //DOM
		if (document.getElementById)
		{
			document.getElementById('usercat').style.visibility='visible';
		}
		else
		{
			if (document.layers)
			{ //NS4
				document.usercat.visibility = 'visible';
			}
			else 
			{ //IE4
				document.all.usercat.style.visibility = 'visible';
			}
		}
	}
// End -->
</SCRIPT>

And my code that implements the drop down, looks like this:

<select name="usercat" class="field_long" style="width:262px;visibility: hidden" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">

Can anyone help or provide some hints for a better alternative?

Thanks.

 

[grtammi]

z-index won't work on any element, unless the element has been positioned in the page (

http://www.w3schools.com/Css/pr_pos_z-index.asp).

That being said, do you have an example page we can look at?

Greg