This is one of the minor CSS problems that plague me constantly.
How do folks around Stack Overflow vertically align
checkboxes and their
labels consistently cross-browser?
Whenever I align them correctly in Safari (usually using
vertical-align: baseline on the
input), they're completely off in Firefox and IE.
Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.
Here's the standard code that I work with:
<form> <div> <label><input type="checkbox" /> Label text</label> </div> </form>
I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!