IE CSS format tableless form with labels, inputs and selects - css

Question

I am having trouble properly formatting CSS to display in IE the way I want it. It shows up in Firefox perfectly. I am trying to have it display the label and then next to it have the input or select box that is aligned and all the same size so it looks even. I know there are hacks for IE but none seem to be making a change. Example CSS and html code that I have and works in firefox is below. Any help would be great Thanks!
*CSS
fieldset {
border: none;
padding: 10px;
width: 600px;
margin-top: 5px;
}
label {
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: left;
}
input {
margin: 5px;
padding 0px;
float: left;
vertical-align: middle;
display: inline;
}
select {
margin: 1px 0px;
padding: 2px;
float: left;
display: inline;
width: 149px;
}
br {
clear: left;
}
*HTML
<fieldset>
<label>First Name:</lable>
<input type="text" value="first_name" /><br >
<label>Last Name:</lable>
<input type="text" value="last_name" /><br >
<label>User Role:</lable>
<select>
<option value=""></option>
<option value="admin">Admin</option>
<option value="basic">Basic</option>
</select>
</fieldset>

Answer 1

Fix your label tags and then try this css code:
fieldset {
border: none;
padding: 10px;
width: 600px;
margin-top: 5px;
}
label {
width: 140px;
margin: 5px;
display: block;
float: left;
}
input, select {
width: 150px;
margin: 5px;
float: left;
display: block;
}
br {
clear: both;
}
It works for me in IE, FF, Chrome, and Safari. Also, you might want to try using ordered lists to style your form elements.