Do controls in Firefox receive mouse events when their CSS visible property is false?

Question

I'm having a problem with FIREFOX. I have an invisible list control over a drop-down control (html 'select'). Don't mind why, but I will say that the over-layer is a pop-up that appears as part of another custom control.

Even though it's hidden, it's preventing me from clicking on the underlying drop-down control, making the underlying control seem disabled. It's not disabled though, because I can tab over to it. I just can't click on it. I know it's the overlay causing the problem, because I moved the underlying control off to the side and it works again.

Is this a bug in Firefox? This isn't like setting a translucency value; it's disabling rendering of the control altogether, so I don't think such an invisible control should be intercepting mouse events. This behavior does not occur in Internet Explorer.

Perhaps there is some other CSS property I can set in JavaScript to toggle its mouse event capturing ability along with its visibility.

dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';

Update: I just read a description for the CSS visibility value "hidden" that read "The element is invisible (but still takes up space)". So I guess I'll have to set it's height to zero along with setting it's visibility to solve this problem.

Answer 1

change your over-layer control's z-index to, say, -1. style="z-index: -1;" This will place it underneath everything, allowing direct access to drop-down. You might have to dynamically change the z-index to bring over-layer back on top when visible.

More info

Answer 2

How are you hiding the element? If I remember it right, "visibility: hidden" is supposed to (rightly) work the way you describe, while "display: none" will banish rendering altogether.

If that's not the cause, can you confirm using Web Developer Toolbar that it is indeed the invisible control that is causing the problem and not another that has opacity set to 0 or something?

Answer 3

The way I've done popup boxes before in Firefox was with CSS properties.

z-index: 500;
display: block;

to show an element, and

z-index: -10;
display: none;

to hide it.

Now. My values for z-index are extreme, but that's just what I chose. This works for me, but my app targeted Firefox specifically; aaaaand I'm using the display property, which you stated you want to avoid.

If you're concerned about using display:block or display:hidden, I think maybe you could try to play with positioning, or sizing the element.

Either make the popup element absolutely positioned and move it offscreen when invisible, or maybe try to make it 0px width and 0px height when invisible. That's two things I would potentially explore if I still had problems. I'm not sure if I would recommend these as best solutions though.

Really consider how many instances of your popup elements will have different display values, I found in my case to be using only two types, 'none', and 'block'. Maybe manipulating the display property will be enough for you.

Hope this helps.