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.
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… ;-)