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 :)