Styling labels and checkboxes in Chrome

[dwlamb]

Is there some standard trick to styling labels and checkboxes so they appear consistently in all browsers? The attatched pic with the label obscured by overlapping checkbox is what I get with Chrome and Safari for Windows. The other attatched pic is what I see in Firefox, IE and Opera.

This is the code for the HTML:

<div class="login-fields">
    <label for="remember" id="remember-lbl">Remember me</label>
    <input type="checkbox" alt="Remember me" value="yes" class="inputbox" name="remember" id="remember">
</div>

The only css is this:

.login-fields label, .contact-form label {
    float: left;
    width: 8em;
}

[Violet_82]

To start with, I'd say that rather than relying on the width of the label to position the input, you should remove that width:8em and give the input a margin-left. The input is a block element so you can safely have a margin applied to it. I am using linux at the moment so I can't test in IE, but try that
I should have said: add a class to the input so you can target it easily or do input[type=checkbox]{margin-left:20px;}

[dwlamb]

Thanks for the input. Giving the checkbox a left margin worked well.

[Violet_82]

No worries, glad it worked.

don't forget to use a css reset as well.