Question

I have been trying to make custom radio buttons using HTML, CSS, and JavaScript. I’ve been looking through the previous questions about radio buttons and I feel like I’ve implemented the suggestions, but my jpeg images are still being cut in half. I’m clearly missing something, but not sure what it is. Below is my HTML CSS and JavaScript. Any input would be greatly appreciated.

<style TYPE="text/css">
.has-js .label_check,
.has-js .label_radio { padding-left: 40px;}
.has-js .label_radio {
background: url(images/radio_button-21.jpg) no-repeat;
width: 33px;
height: 35px;}

.has-js .label_check { background: url(check-off.png) no-repeat; }
.has-js label.c_on { background: url(check-on.png) no-repeat; }
.has-js label.r_on { 
background: url(images/radio_button_selected.jpg) no-repeat;
width: 33px;
height: 35px;}

.has-js .label_check input,
.has-js .label_radio input { position: absolute; left: -9999px;}

</style>

</head>

<label class="label_radio" for="radio-01">
    <input name="sample-radio" id="radio-01" value="1" type="radio" />
    Yes
</label>


<br />
<br />

<label class="label_radio" for="radio-02">
    <input name="sample-radio" id="radio-02" value="2" type="radio" />
    No
</label>

<br />
<br />

<label class="label_radio" for="radio-03">
    <input name="sample-radio" id="radio-03" value="3" type="radio" />
    Maybe
</label>


</body>

JavaScript Code

onload = function() {

    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};

Answer 1

It’s hard to say without being able to run your code, or at least to see a screenshot of how it looks. But it sounds to me like the width and/or height of your radio button (or the containing element around it) is too small for the size of image you’re using. If so, a CSS declaration specifying the appropriate width or height should fix it.

EDIT: To troubleshoot these kinds of things, I like to do my work in Chrome browser so I can use its built-in developer tools. In Chrome I can right-click on an element and choose “Inspect Element”. This enables me to browse the DOM and see what CSS specifiers are affecting each element, and experimentally tweak them until I’ve diagnosed the problem.