How can I eliminate dead-zone on button with position relative? (HTML/CSS)

Question

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 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.

Here's a working example: http://dl.dropbox.com/u/1186571/Test.htm

I've also tried using a margin instead of position: relative; and also tried setting .active with javascript instead of using :active.

Just to be clear: I am talking about a deadzone inside the link (the blue box in my example) but outside the bounding box of the text. Here's an image with the area I am talking about highlighted in dark blue:

http://dl.dropbox.com/u/1186571/example.png

Answer 1

When the link is active you move it away, so you no longer click on the link. Using this will solve the problem:

a:active { 
    padding: 4px 5px 2px 7px;
}

See http://jsfiddle.net/ZCkpE/5/ (thanks for Kevin Gurney for creating the initial code)

Update:

It seems to a bug (or intended behaviour) in the browser. W3.org definition of click event:

The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:

1. mousedown
2. mouseup
3. click

You are obviously clicking on the same screen location. The problem is that the mousedown event is on the padding of the link, and the mouseup event is on the link (the text).

See http://jsfiddle.net/ZCkpE/8/ .

• If you mousedown on the padding move the mouse and mouseup on the padding, click event fires.
• If you mousedown on the padding move the mouse but now mouseup on the text, there is no click event.

It means that the padding and the text itself is not treated as the same element by the click event.

Solution without using too much "hack": make an overlaying div: http://jsfiddle.net/ZCkpE/13/ . Works in Chrome, Firefox. In IE it works if you click on the text. If you click on the padding the :active style is not activated.

Answer 2

This is a terrible and ugly hack, but you could do something like this: instead of moving the actual link element or something inside it, move a separate link with the same text that you position at the same place. Of course, you'll also have to hide the actual link. It needs a lot of additional markup and the moving can be done only in JavaScript, but at least it can be done and works.

HTML:

<span class="link_container"><a href="#" class="main"><span>Click me</span></a> 
<span class="replacement"><a href="#" class="aux"><span>Click me</span></a></span></span>

CSS:

.link_container { display: inline-block; position: relative; }
a.main { display:inline-block; position: relative; z-index: 2; }
a.main span { position: relative; top: -1000px; }
.link_container span.replacement { position: absolute; left: 0; top: 0; z-index: 1; }
.link_container span.replacement span { display: inline-block; background-color: #fab; }
.link_container span.replacement span.offset { position: relative; left: 5px; top: 5px; }

JS that moves the text on each click:

$(document).ready(function() { 
$("a").click(function() {
    $("span.replacement span").toggleClass("offset");
    $("p").text($("p").text()+" clicked!");
    return false; 
});
});

http://jsfiddle.net/Vfc5r/36/

Tested in Chrome and IE8. Chrome reacts to the .main link and IE8 to the .aux link. Might be it doesn't actually fix things on the browsers that still react to the link that is moved, but is an improvement on the browsers that react to the link that is static.