Saturday, December 27, 2008

How to align checkboxes and their labels consistently across browsers

I was trying today to get a checkbox and its label to look consistent across browsers and finally came up with this solution. I tested it in IE6, FF2 and Chrome and it rendered same pixel by pixel in all the three browsers (also browsershots.org confirmed the result for other browsers). Hopefully this will save time for someone else.

<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#wb
{
    width: 15px;
    height: 15px;
    float: left;
}
#somelabel
{
    float: left;
    padding-left: 3px;
}
</style>

<div>
<input id="wb" type="checkbox" /><label for="wb" id="somelabel">Web Browser</label>
</div>

* If you don't want to set the padding and margin to zero for all elements as I did here, you could only set them for the label and checkbox.

4 comments:

  1. Amiable brief and this post helped me alot in my college assignement. Say thank you you on your information.

    ReplyDelete
  2. Brim over I assent to but I contemplate the brief should prepare more info then it has.

    ReplyDelete
  3. This is great information you are providing!
    Its very well detailed and appealing to keep to eye to read more.
    We also try to keep our blog filled with information and helpful methods to help anyone with carpet problems.
    Once again great blog. Very well informative.

    ReplyDelete
  4. You really come come up with great information and links. Thanks for sharing them here.

    ReplyDelete