View Full Version : select box overlap in IE6

Jun 9th, 2008, 07:44 AM
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(); }
<!-- Begin
function clearPreloadPage()
{ //DOM
if (document.getElementById)
if (document.layers)
{ //NS4
document.usercat.visibility = 'visible';
{ //IE4
document.all.usercat.style.visibility = 'visible';
// End -->

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'">

I have also tried the so-called iframe solution to this problem, but havent been able to understand it enough to apply.

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


Jun 9th, 2008, 09:35 AM
select box overlap in IE6

But the menu is supposed to be on top of the combo box - ie overlapping it - but it isnt in IE6.:confused: Anyway http://20.targetprocess.com/2006/07/ie6-select-and-z-index-problem.html may help!

Jun 9th, 2008, 10:33 AM
This is helpful, but I have concerns about the memory it appears to be using (according to the article). I was hoping to find a solution without the iframe...