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
Post a Comment