Member Avatar for 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;
}
Login-Firefox.png 4.86 KB Login.png 16.68 KB
Edited by dwlamb because: Hit post too soon earlier
  • 3 Contributors
  • 4 Replies
  • 395 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by iamthwee
Member Avatar for 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;}

Edited by Violet_82 because: addition
Member Avatar for dwlamb

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

Member Avatar for Violet_82

No worries, glad it worked.

Edited by Violet_82
Member Avatar for iamthwee

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.