Checkbox Alignment Out of Whack

Discussion in 'Web Design and Development' started by ppc_michael, Jul 19, 2008.

  1. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #1
    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:
    Code:
    <input type="checkbox" id="remember" name="remember" /><label for="remember">Remember Me</label>
    I haven't applied any special CSS. Any ideas?
     

    Attached Files:

  2. bbarnhart macrumors 6502a

    bbarnhart

    Joined:
    Jan 16, 2002
    Location:
    Stilwell, Kansas
    #2
    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.
     
  3. ppc_michael thread starter Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #3
    Ooh. :( What's the best way to do that? Padding? Margin? Relative positioning?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    You can tweak things with vertical-align:
    Code:
    input {
     vertical-align: text-bottom;
    }
     
  5. bbarnhart macrumors 6502a

    bbarnhart

    Joined:
    Jan 16, 2002
    Location:
    Stilwell, Kansas
    #5
    Try pushing the input check box down with margin.
     
  6. ppc_michael thread starter Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #6
    Thanks! Vertical-align does nothing, but adding some top margin moves it. Now it looks good in Safari but too low in Firefox. :rolleyes:
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.
     

Share This Page