Small dead space on a div button in chrome

Question

I can't explain this one. I've got a div that's a button. I use the :active psuedo class and position: relative; to move it slightly down and to the right when clicked, to give it an animation. For some reason, there is a small dead space on this button in Chrome about half way between the text and edge of the button. The psuedo class still fires but the Javascript on the button does not. If I remove the position relative, the problem goes away. This also happens in Firefox, but the deadspace in Firefox is on the very edge where the button moves out of the way, which makes sense but also needs to be fixed.

I created a JSFiddle to show the problem: http://jsfiddle.net/dillydadally/CUHA7/6/

Any idea why this is happening? Is there a way to fix it?

Answer 1

CSS. It's because of margin: 10px; on #btn

EDIT

If you use onmousedown rather onclick it will work.

Explaining:

The pseudo class is being activate before the onClick. If you change the values of :active from 2px to 20px. You will see this happening even if you are clicking on the middle of the button.

So after the new values of left and top set by the :active, the mouse isn't on top of the div anymore and can't register the click (press and release).

But onmousedown is still triggered because it doesn't depend on the release of the mouse's button.