html - Labels on check boxes not appearing correctly formatted on ipad and iphone -


i have form has check boxes in not displayed correctly on ipad , iphone. there large margin on either side of check box.

html code is:

    <dl class="dlcategories">     <dt><font class="categories">type:</font>     <input type="checkbox" name="type[]" value="condo" id="condo"><label>condo</label> <input type="checkbox" name="type[]" value="house" id="house"><label>house</label></dt></dl> 

css code is:

input[type="checkbox"] {    height: 15px;    width: 15px;}  .dlcategories { margin-top:10px;}  .categories{ font-family: gotham, "helvetica neue", helvetica, arial, sans-serif;; color: #0e3544; font-size: 18px; line-height: 20px; letter-spacing: 0px; margin-top:10px;} 

when displayed on browsers , android looks (screenshot).

when displayed on ipad , iphone, there larger left margin on label (screenshot).

i tried searching on stack , web people have had similar issues no avail. hope can articulate solution others may have same issue. thank-you.

i'm not sure solve problem (don't have idevice try), label should have for attribute:

 <label for="condo">condo</label> 

that way label behaves part of relevant input, example, clicking label has same effect clicking input (toggling checkbox, or focusing on text textboxes...)


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -