Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to align checkboxes and their labels?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 377
    Comment on it

    Hi there.

    In this blog post, I will tell you the solution for one of the minor problems faced in CSS.

    And that is, vertically aligning checkboxes and their respective labels consistently across browsers. Whenever I try to align them correctly in one browser, they're completely off in other browsers. Just when I fix them in others, the previous browser's output is inevitably messed up. This is where I waste a lot of my time whenever I code a form.

    After a lot of working and asking around, I think I have found a decent solution to the problem.

    Here is the code below.

    HTML :

    <form>
        <div>
            <label><input type="checkbox"/> Label text</label>
        </div>
    <form>
    

     

    CSS :

    label {
        display: block;
        padding-left: 15px;
        text-indent: -15px;
    }
    input {
        width: 13px;
        height: 13px;
        padding: 0;
        margin:0;
        vertical-align: bottom;
        position: relative;
        top: -1px;
        *overflow: hidden;
    }

     

    OUTPUT :

    Let me give an explanation for the above code :

    • The *overflow declaration is an IE hack, better known as the star-property hack. Using this, IE 6 and 7 will execute it, but it will have no effect in Safari and Firefox.
    • Something I noticed about the vertical-align property was that the only value consistent across browsers was vertical-align: bottom. Setting this, showed almost  identical results in Safari, Firefox and IE.
    • To cut off with the extra space that IE adds around input elements, set a width and height on the checkbox and overflow: hidden.
    • Depending on your font-size, there will be a need to adjust the relative positioning, width, height, and other properties to get things look right.

    Hope this helps you all too.

     

    Keep Coding :)

    How to align checkboxes and their labels?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: