I hope the title is accurate enough to portray the problem I am facing.
I have a div (I tried several different things: a , span , button , everyone faces the same problem) that when clicked, the onclick event does not fire, although css div:active .
This is apparently due to the fact that in the div:active I set top: 6px to create a push down effect. The effect looks beautiful, it’s just that sometimes, if for some reason you click on the top of the element or in the center, the div will “go away” from the path and not trigger the onclick event.
I thought that a good solution would be to wrap the element in another div and then attach the onclick event to that div. To my surprise, the clicks did not shoot at the top or middle of the button.
If I remove top: 6px at the bottom of the div:active , the button works fine, it just doesn't have the same “pressed” effect.
It seems to me that this is difficult to explain, so here is a screenshot (blue areas where onclick does not work):
and here is the code for the initial attempt: http://jsfiddle.net/RS5Q5/6/
and the code to move the onclick listener from the outside: http://jsfiddle.net/RS5Q5/4/ (onclick will fire everywhere in the div except the blue parts in the picture)
It's also worth noting that the middle and lower blue areas seem to click fine in firefox, but not chrome or safari. The upper blue area is still a problem.
Any correction or explanation for this strange behavior? Any guidance would be greatly appreciated. Thanks.