input checkbox in div jumps to top of page on firefox [closed]

Question

I use div over label and input type="checkbox". I do this in order to have the checkbox look like a button.

Here is my example: http://jsfiddle.net/Je87Q/

What should I do with a checkbox or label/input that will stop jumping to the top of my page?

This happens ONLY on Firefox. Any idea how to fix this?

Answer 1

DEMO

Just need a minor CSS change

#modbutton label input {
    /* position:absolute; */
    /* top:-20px; */
    display:none; /* ADD */
}

Answer 2

This is happening because you are positioning the checkbox absolutely and -20px above the viewport. When you click on the span, you're triggering the label to change the checkbox which causes the jump to the top. There are a variety of ways to fix this, but an easy one would be to change:

#modbutton label input {
    position:absolute;
    top:-20px;
}

to something like:

#modbutton label input {
    position:absolute;
    left:-20px;
}

jsFiddle example

Answer 3

I got your point

Please change this code for your input field

<input id="status" type="checkbox" name="displaystaffstatus" style="position: relative;">

or do this thing

#modbutton label input {
    display:none;
}