I've recently noticed a problem with styled <a> and <button> tags which occurs with display block or inline-block, some amount of padding, and position relative to adjust the position when :active e.g.

a { display: inline-block; padding: 3px 6px; background: #aff; }
a:active { position: relative; top: 1px; left: 1px; }

The problem is a 1 pixel invisible box around the text (approx 2 pixels away from it) where the click is not registered by the browser or by JavaScript, however the animation still occurs. This happens in (at least) Firefox and Chrome on Windows.

This is a big problem for small buttons, and for a long time led me to believe my JavaScript was faulty. How can I keep the existing styles and eliminate this bug?

  • No one can debug a snippet. Post a live page. Nathan Duran over 6 years ago

1 answer

Mottie 1134
0
points

I don't know if this will solve your problem, but try setting the outline to none:

a:active { position: relative; top: 1px; left: 1px; outline: none; }

The problem with doing this is it makes it harder to navigate for people who don't use a mouse and I believe breaks some screen readers.

Answered over 6 years ago by Mottie
  • Nope, this doesn't help. Thanks for trying. Peter West over 6 years ago