For example, I have this div:

<div>
    <label style="width: 500px; color: red; font-family: Arial">
                    <b>first name:</b>
    </label>
    <input type="text" name="first_name" style="border-color: blue; border-style: solid" />
</div>

The text-box is far away from the label in Internet Explorer (as it is supposed to be, based on the width of 500px), but in Firefox and Chrome, it is right up against the label.

Thanks.

2 answers

0
points
This was chosen as the best answer

After some head-scratching and research, I've found it's because labels are inline elements, which according to CSS documentation should ignore width styling. So, as usual, IE is doing it wrong and Chrome and Firefox are doing it right.

You can make it accept a width by adding float: left; or whichever direction you want.

http://www.tacticaltechnique.com/web-development/label-tag-width-not-working/comment-page-1/

Answered about 6 years ago by Tom Smilack
  • @ Tom Smilack, "So, as usual, IE is doing it wrong and Chrome and Firefox are doing it right." LOL, at least IE is doing what I want it to do. :) I am starting to think that using tables for form-layout is the best way. Geoffrey Van Wyk about 6 years ago
Ktash 1851
0
points

A better solution than floating it, as stated above, is to set its display property to something other than inline. I've found diplay: inline-block is the best for achieving what you're going for. There is a bug in IE where inline-block only works on inline elements, but since that is the problem you are trying to fix, it works perfect.

Answered about 6 years ago by Ktash