Checkbox issue ( selectable area offset )

I have a custom check box.

The issue I have is , on hover the actual image area ( that is clickable is out of whack ) if you try it out you will see,.. firebug element inspector is best.

Fiddle here : http://jsfiddle.net/ozzy/YsbBM/1/ albeit sprite not displaying properly.

Actual demo here : http://sitehelp.com.au/demos/checkbox/

Js here:

function setCheckboxDisplay(el){
    var objWrap;
    objWrap = document.getElementById(el.id+"Wrap");
    if(el) {
        if(el.checked) objWrap.className = "styledCheckboxWrap wrapChecked";
        else  objWrap.className = "styledCheckboxWrap";
    }
}

CSS here:

    . styledCheckbox
   {
   line-height:20px;
    height:20px;
        width:20px;
    filter:alpha(opacity=0.0);
    opacity:0.0;
    outline:0
   }


. styledCheckboxWrap
{
    position:relative;
    float:left;
    background:url("/images/cbox.png") no-repeat top left;
    width:20px;
    he开发者_Python百科ight:20px;
    margin:3px;
}
. wrapChecked{background-position: 0px -20px}
. checkboxLabel{
    float:left;
    cursor:pointer
}

html here:

<span id="checkboxWrap" class="styledCheckboxWrap"><input type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>

Checkbox 1

The problem is the checkbox hover isnt spot on, for the width and height of the checkbox. So that you have to fumble around trying to get the exact position for clicking the damn thing. Not sure what I have done wrong but its doing my head in fixing it. lol

Any suggestions please

For your jsFiddle problem, change the drop-down that says "onDomReady" to "no wrap (head)" and it will work. As for the actual problem... do you mean that you can't click on the label to check the box, only the box? Because the checkbox works perfectly for me...