The absolutely positioned element relies on: active - but why?


I have an anchor with a piece wrapped in <em> tags so that I can absolutely position then on top of the anchor background sprite, which sits off to the left of the rest of the anchor text.

Everything is well, except on :active the absolutely positioned bit is jumping down about 20 pixels.

And I'm having a tough time diagnosing this one since you're kind of limited to inspecting :active states with firebug, since you have to actually be clicking the element to get the :active rules to show up!

Here's the page and the piece in question are the green call to action buttons. If you click and hold (or simply click) you'll see the html text on the buttons jumps downward as described.

FYI the styles for this page are in the brant.css file, not the main.min.css

The position is being set to relative in this rule:

a:active {
    outline:0 none;

Add position:static to this rule to override the a:active behaviour:

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active {
    background-position:left -50px;
    position:static; /* add this */