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.
15 responses to “Label tag width not working”
Thanks for the info. Saved me a good bit of time!
James
I just had the same problem. It worked for me too.. thx
Thanks for the save! :D
You rock! :-D
Thanks a lot! :p
thanks a lot ;)
I faced the same problem. Thanks for the fix.
thanx a lot!!!
{display: inline-block;} works too. No float needed and it stays inline…
Last comment is good!!!
This work fine and align input field in the middle of the label if the text wrap:
label
{
padding: 0px 5px 0px 5px;
width: 80px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
I experienced same problem. Thanks for the post.
Comments
width made working by float left;
thanks
Thanks a Lot…..
Something like three years later, this helped me out too. Thanks! :-)
Same problem… thanks for the enlight… ;-)