Question

Basically in the form when you click on the image, it should also check the box. This works in in all browsers but IE7 and IE8. Anyone have any ideas?

<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center"><label for="interest1"><img src="/images/interest1.jpg" width="152" height="152" alt="" /></label>
<label for="interest2"><img src="/images/interest2.jpg" width="152" height="152" alt="" /></label>
<label for="interest3"><img src="/images/interest.jpg" width="152" height="152" alt="" /></label></P><!-- code making checkbox be an image-->
</form>

Answer 1

It seems that IE < 9 doesn’t like subnodes (non-input) in a label. A workaround is to set the images as the background of the label and making the label be inline-block so you can set its size. Tested in IE8 http://jsfiddle.net/K9FEk/8/

CSS

label {
    border:1px solid red;
    display:inline-block;
}

#label-interest1 {
    background-image: url(http://www.gravatar.com/avatar/36fa212d5215d9f282033375834ba0c0?s=120&d=identicon&r=PG);
    width: 152px;
    height:152px;
}

HTML

<form>    
  <input type="checkbox" name="interest1" id="interest1" value="x">        
  <p align="center">    
    <label id="label-interest1" for="interest1"></label>
  </p>
</form>