2

When you have a transparent div and you generate a click on in (for example) the click falls right through to elemets below. This behavior does not exists in other modern browsers and I am sure is out of any W3C recommendation. Finally, it messes up my design. Is there any way to work around this?

Clarification - transparent like with no background color defined or with background-color: transparent;

Another clarification - what I mean by falls right through is that the browser behaves as the transparent element is completely not there - ignores its event handlers and triggers other event handlers of elements below that are not his parents and should be hidden by it.

I solved it by setting the background color to non trasnparent and using

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

to achieve transparency instead of the old 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";

Thanks to everyone that helped!

Boris Hamanov
  • 3,085
  • 9
  • 35
  • 58
  • Last time I checked Opera did the exact same thing. – Ivo Wetzel Dec 11 '10 at 13:30
  • Transparent how? PNG? opacity? rgba? – Šime Vidas Dec 11 '10 at 13:32
  • Clicks always bubble up through the DOM unless you do something to stop it. Can you show us some code? – tvanfosson Dec 11 '10 at 13:34
  • @avok00 - I can understand why it wouldn't invoke clicks on elements under, but not part of the DOM hierarchy -- it shouldn't since the click is intercepted by the DIV. I'd still like to see some code since what you're describing doesn't seem reasonable. – tvanfosson Dec 11 '10 at 13:46
  • @tvanfosson IE is not a reasonable browser. It does that maybe in attempt to fix incorrect layouts. Just recreate the situation and you will see code. Make two divs, not in the same parent/child chain, set width and height, define click handlers on both and position one over the other. Set them both with background color. Click on the top div in IE8 (not tested older versions) and see who gets the click. Then remove background color from top div. Repeat the click test. – Boris Hamanov Dec 11 '10 at 13:54
  • 2
    @avok00 -- to improve your question, you should provide sample code that fails. asking us to generate code that fails based on a description, then test it, will not improve your question and may lead to confusion as different people implement it in different ways. I'd like to help but I'm not going to guess at the code you're having problems with. – tvanfosson Dec 11 '10 at 14:01
  • @tvanfosson I am actually asking for help, not for more work :) – Boris Hamanov Dec 11 '10 at 14:03
  • 2
    @avok00 -- good luck. I don't think I can be of any help without some code to look at. – tvanfosson Dec 11 '10 at 14:14
  • Don't take it personally, but If you did not bump into that problem so far, chances are, you are not going to help anyway. GL to you too. – Boris Hamanov Dec 11 '10 at 14:20
  • 2
    @avok00 -- did you really just go downvote one of my old questions because you thought I downvoted this one? You really should learn to distiguish between comments and votes. I'm just trying to help you frame your question in a way that will get more answers. – tvanfosson Dec 11 '10 at 14:20

1 Answers1

4

Can it we fixed by giving the element a background color and a zero or nearly zero opacity ? This hack is used when you want to give the file input elements a custom appearance (http://www.quirksmode.org/dom/inputfile.html)

Fabien Ménager
  • 140,109
  • 3
  • 41
  • 60
  • 1
    IE does not support RGBA. I use -ms-filter: "progid:DXImageTransform.Microsoft.gradient to simulate it. But unfortunately the filter does not count as background color. Visually the element is not transparent. But functionally it is. – Boris Hamanov Dec 11 '10 at 14:05
  • I read the hack, is opacity going to work on div? I though it is only for images? – Boris Hamanov Dec 11 '10 at 14:15
  • Opacity can be applied on any element except table rows and table bodies. This can be done with filters like in the page on Quirksmode.org. – Fabien Ménager Dec 11 '10 at 16:40