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">

The only css is this:

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

Edited by dwlamb: Hit post too soon earlier

Attachments Login-Firefox.png 4.86 KB Login.png 16.68 KB
4 Years
Discussion Span
Last Post by iamthwee

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;}

Edited by Violet_82: addition


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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.