Home/ Questions/Q 8363587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:12:52+00:00

I can’t explain this one. I’ve got a div that’s a button. I use

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0