Label tag width not working

The <label> element will not accept a width value in FireFox, and I just spent way too long finding a workaround. The label element is used to associate a text label to a form control that does not automatically have a label.

Short answer: float left makes width work on label elements.

When assigning a width to the label tag, the width value worked in Internet Explorer. FireFox disregarded the width in pixels that I assigned to the label HTML tag in my CSS file.

Label elements are in-line style elements, so technically FireFox is interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes. The workaround is to force the label element to become a block level element by floating it.

Why float it when you could just declare it a block element with display: block, you ask? Because block elements will stack on top of each other without being floated, and if my original intent was to give a label a width I might be trying to distance it from something beside and not below it. You can do display: block; float: left; and achieve the same result, but if you are going to float it the display attribute is not required.

5 Comments so far

  1. James on July 10th, 2009

    Thanks for the info. Saved me a good bit of time!

    James

  2. ebaddouh at gmail dot com on August 5th, 2009

    I just had the same problem. It worked for me too.. thx

  3. VitaminJeff™ on December 25th, 2009

    Thanks for the save! :D

  4. Jenny on June 24th, 2010

    You rock! :-D

  5. Hannah on August 30th, 2010

    Thanks a lot! :p

Leave a reply

 

Thanks for reading!

You like? Subscribe to my rss feed
or

Sign up for email updates:

Some Recent Updates