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.
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.
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.