Radio button causes browser to jump to the top

I have the same problem, I use @Frank Conijn's solution,but if the radio set visibility: hidden; or display:none,the label(for="#id") not work in IE8, at last, I fix it like this:

.rdbut label input {
  position:absolute;
 left: -9999px;
 }

do not set top value


Interesting. I don't know exactly why it behaves that way, but curing the unwanted behavior is easy: exchange the CSS top and left values of the radio inputs for visibility: hidden.

Like this: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    #content {
        width: 500px;
    }
    .rdbut {
        margin:0px;
    }
    .rdbut label {
        float:left;
        width:65px;
        margin:4px;
        background-color:#EFEFEF;
        border:none;
        overflow:auto;
        display:inline;
    }
    .rdbut label span {
        text-align:center;
        font-size: 12px;
        padding:3px 8px;
        display:block;
    }
    .rdbut label input {
        position:absolute;
        t/op: -9999px;
        l/eft: -9999px;
        visibility: hidden;
    }
    .rdbut input:checked + span {
        background-color:#404040;
        color:#F7F7F7;
    }
    .rdbut .colour {
        background-color:#FF8E22;
        color:#ffffff;
    }
    </style>
</head>
<body>
    <div id="content">
        <p>"Lorem ipsum" goes here.
        </p>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT2Y2PC" type="radio" name="Multi-licence" value="2 Year 2 PC|+34.00|0" checked="checked" />
            <span>£35.00</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
    </div>
</body>
</html>

Updated JSFiddle here: http://jsfiddle.net/XkQ7T/1/.

.
By the way, setting checked on every radio button is no use - only the last one is actually checked. And it invalidates your code. Also, you need form tags around the group of radio inputs.

Tags:

Css

Radio Button

Recent Posts