CODEWITHSUNDEEP
csscss-position
Joel Glovier
Joel Glovier

Reputation: 7679

Absolutely positioned element jumping down 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 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

Upvotes: 2

Views: 2131

Answers (2)

Razor Storm
Razor Storm

Reputation: 12336

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.

Upvotes: 3

GWB
GWB

Reputation: 2605

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 */
}

Upvotes: 2

Related Questions