After spending hours trying to troubleshoot, I still can't seem to align my hidden radio buttons properly within a label with a background image. Instead of lining up on the left side as intended, they are appearing closer to the middle of the div. For reference, you can view my website here:
CSS:
.button {
visibility:hidden;
clip:rect(0 0 0 0);
position: absolute;
}
label {
background-image: url("Images/Blue Button.png");
background-size: 130px;
background-repeat: no-repeat;
width: 130px;
height: 30px;
display: block;
float: left;
margin-right: 50px;
text-align:center;
font-size:small;
font-weight: 700;
padding-top:7px;
font-family: 'Lucida Sans Unicode, Lucida Grade, sans-serif';
}
.button:checked + label {
background-image: url("Images/Clicked Button.png");
}
input[type=button] {
font-family: 'ubuntu', sans-serif;
width: 130px;
height:30px;
background: transparent;
float: none;
}
HTML:
<div id="leftcolumn">
<div id="buttonDeadspace"></div>
<form action="#">
<ul>
<li>
<input type="radio" class="button" name="buttonGroup" onclick="Roof_Stylei_HipGroup();" id="button0a" checked/>
<label for="button0a">Roof Style: Hip</label>
</li>
<li>
<input type="radio" class="button" name="buttonGroup" onclick="Roof_Stylei_GableGroup();" id="button0b" />
<label for="button0b">Roof Style: Gable</label>
</li>
</ul>
</form>
... (Additional HTML code) ...
</div>