This code works perfectly in Firefox, Chrome, Safari, and Internet Explorer 8 under MS Windows (XP and 7). Under Mac OS X the labels are moved slightly down from the center (in Firefox, Chrome, and Safari). On Linux centering works fine in Firefox, but fails in Chrome (label is centered to the top margin of the checkbox).

Don't know why such inconsistencies between different OS happen. I'm looking for any references or pointers to solve this issue. Thanks in advance.

-- Andrej

1 answer

Have you looked into CSS resets at all? Their purpose is to make all HTML elements behave the same way by default. Changes you make on top of that should be reflected in all browsers (and hopefully all OSs as well).

Here is Meyer's well established reset:
http://meyerweb.com/eric/tools/css/reset/

Not quite correct, the purpose of CSS resets is to remove the default styling applied to different elements by different browsers. Any additional CSS rules added after a reset will still be treated by individual browsers as those individual browsers treat them, meaning that standards-based browsers will probably apply them in a nearly identical way and IE will apply them in whatever way it thinks they should be applied. A reset will not magically remove the need for testing, or make all browsers interperet rules the same — danwellman over 8 years ago