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.