Absolutely positioned element jumping down on :active - but why??

Question

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 http://cure.org/brant 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

Answer 1

Ok I found it,

you have a rule that does this:

a.active 
{
    position:relative;
}

which is giving your active buttons relative positioning. Adding static positioning to li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active in

brant.css

helps

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active
{
    position:static;
}

However, I'm curious as to what about relative positioning is causing it to shift downwards. Update: according to firebug, the link, and the strong are still in the right position, however it is being rendered lower. This is perplexing.

At any rate, the solution I posted slightly about this paragraph solves the problem.

Answer 2

The position is being set to relative in this rule:

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

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;
    color:#2F2511;
    position:static; /* add this */
}