IE7/8 Inpunt/Label combo problem
In IE7/8 clicking the label parent of a checkbox does not trigger the checking of the element. This appear to work fine in other major browsers including IE9
by biznuge
HTML
<form class='selector' method="post"><br/>
<label for='section_23' class='courseLabel' title='Allied Health (inc OT, Operating Department Practice and Physiotherapy)'>
<div class='imgHolder'>
<img src='http://churchavenue.campus.unn.ac.uk/static/digital_prospectus/UG2011/pdf_thumbs/150_wide/23_0.png' alt='Allied Health (inc OT, Operating Department Practice and Physiotherapy)' />
<img src='http://churchavenue.campus.unn.ac.uk/static/digital_prospectus/UG2011/pdf_thumbs/150_wide/23_1.png' alt='Allied Health (inc OT, Operating Department Practice and Physiotherapy)' />
</div>
<input id='section_23' checked='checked' type='checkbox' name='courses' value='23' title='Allied Health (inc OT, Operating Department Practice and Physiotherapy)' >
</label>
</form>
CSS
form label{
font-size:0.85em;
/*padding:0 5px;*/
display:block;
/*width:350px;*/
float:left;
/*margin-bottom:15px;
margin-top:15px;*/
margin:15px;
display:block;
/*background-color:#F93;*/
cursor:pointer;
position:relative;
}
form label.over{
margin:10px;
/*padding:5px;*/
border:#0099FF solid 5px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow: 0 5px 10px 4px rgba(0,0,0,.3);
-moz-box-shadow: 0 5px 10px 4px rgba(0,0,0,.3);
-webkit-box-shadow: 0 5px 10px 4px rgba(0,0,0,.3);
}
form label.courseLabel {
box-shadow: 0 5px 10px 4px rgba(0,0,0,.1);
-moz-box-shadow: 0 5px 10px 4px rgba(0,0,0,.1);
-webkit-box-shadow: 0 5px 10px 4px rgba(0,0,0,.1);
}
form label.courseLabel input[type=checkbox]{
/*margin:20px 10px;
float:left;*/
position:absolute;
top:10px;
left:10px;
/*border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;*/
}