Checkbox Alignment Out of Whack

[ppc_michael]

I'm having some weird issue with a checkbox for a login form I'm doing. A screenshot is attached, but basically the checkbox is slightly above the label. This occurs in Safari and Firefox on the Mac. I haven't checked with Windows yet.

The HTML looks like this:

<input type="checkbox" id="remember" name="remember" /><label for="remember">Remember Me</label>

I haven't applied any special CSS. Any ideas?

 

[bbarnhart]

You'll need to push the input checkbox down or the label up to make it nice and pretty. Font size can affect it the positioning of the text.

 

[ppc_michael]

Ooh. What's the best way to do that? Padding? Margin? Relative positioning?

 

[angelwatt]

You can tweak things with vertical-align:

input {
 vertical-align: text-bottom;
}

 

[bbarnhart]

Try pushing the input check box down with margin.

 

[ppc_michael]

Thanks! Vertical-align does nothing, but adding some top margin moves it. Now it looks good in Safari but too low in Firefox.

 

[angelwatt]

Thanks! Vertical-align does nothing, but adding some top margin moves it. Now it looks good in Safari but too low in Firefox.

Vertical-align works in certain situations. I wasn't sure what code existed around your input tag. If you have an li or p tag around it, it should work.