Button CSS weird results

Question

I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.

The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.

Any Ideas?

Thanks.

Answer 1

You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)

http://jsfiddle.net/3dk48/8/

a.back:active {
    /* This breaks it.
    position: inherit;
    top:1px; */

    color: black;
}

In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)

The LoVe-f-HAte mnemonic:

a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

... ensures that the correct states override the correct other states.

Answer 2

Remove the below code from .back style

position: absolute;   // not need
margin-left: 2%;      // not need

then the problem can solved.

EDIT:

also make change here..

.back:active {
    /* position: absolute;
       top: 1px; */
    color: black;
}

fiddle: http://jsfiddle.net/3dk48/9/

Answer 3

use this:

.back{
    top:32px !important;
}

Answer 4

body{
    position:relative;
}