Why does IE respect CSS tag width but not Firefox or Chrome?

Question

I am trying to write a contact form, but my shortcut widths are not used in Firefox or Chrome. IE seems to be working fine (this time). Here is my html

<form name="" id="" action="" method="post"> <div id="my_form"> <div> <label for="username">Username:</label> <input type="text" name="username" id="username" /> </div> <div> <form> 

and here is my CSS

 #my_form div label{width:200px;display:inline-block;} 

any ideas how i can force the label width they seem to be crumbling

Answer 1

Try the following:

 #my_form div label{width:200px; display:block; float:left;} 

Check out this run (http://jsfiddle.net/jrpab/), it works fine in Chrome.

Answer 2

to try:

 #my_form label{width:200px;display:block; clear:left; float:left; } #my_form input{display:block; float:left; width:auto;} 

Answer 3

After some scratches and research, I found this because shortcuts are inline elements that, according to the CSS documentation, should ignore the width style. So, as usual, IE does it wrong and Chrome and Firefox do it right.

...

set the display property to a value other than the built-in one. I found a display: an integrated unit is the best way to achieve what you are going to do.

http://doctype.com/firefox-chrome-ignore-widths-my-labels