0

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

Edited by dwlamb: Hit post too soon earlier

Attachments Login-Firefox.png 4.86 KB Login.png 16.68 KB
3
Contributors
4
Replies
26
Views
4 Years
Discussion Span
Last Post by iamthwee
0

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

0

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.