Absolutely positioned links shifting to unexpected position on click (a:active)

Question

I have a couple links on this page (http://tuscaroratackle.com) that are ending up at unexpected positions in their :active state. The links are absolutely positioned, so I'm guessing the issue is partly due to that. But I can't figure out what rules are getting applied on :active to make them shift down and to the left so far. I do have one rule that makes them "depress" a bit on active (a:active {position:relative; top:1px;} but can't quite figure out why they are shifting so badly.

The links in question are these: http://cl.ly/2lOG (screenshot) - it's the "See Rods" link that appears on hover. If you click you'll see the awkward resulting positioning.

Also for those that don't know (I recently found out) you can inspect the :active state in firefug. Just use the drop down arrow on the style tab to toggle those styles on.

Answer 1

From description of position:absolute:
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.

And, as you noted, you have position:relative; defined for a:active. Now, therefore, in <a><span></span></a> combination position of span is counted relative to position of a, not to position of .hp-promo-item.

As for solution, if you need to move a down 1 pixel on :active, maybe margin-top will work better. But wait, you already have margin-top:1px for .promo-content .icon. Well, maybe margin-top:2px !important; then. I don't really understand the aim to suggest more.

PS Thanks for telling about :active helper in firebug, pretty useful!