CSS issues in IE

Question

I have design a login form using html and css. The styles are displayed correctly in chrome and firefox. But in IE it has some problems.

HTML

<div id="wrapper">
<div id="page">
    <form id="adminLoginForm">
        <label>User Name :</label>
        <input type="text" class="uname"/>
        <label>Password :</label>
        <input type="password" class="pwd"/>
        <input type="submit" class="loginSubmit submit" value="SUBMIT"/>
        <p class="alert loginAlert">Test alert</p>
    </form>
</div>
</div>

CSS

#wrapper{
    width:1000px;
    margin:0 auto;
}
p{
    margin:0;
    padding:0;
}
#page{
    float: left;
    width: 1000px;
    min-height: 480px;
    background-color: #FFFFFF;
    padding-bottom:20px;
}
.submit{
    float:left;
    width: 130px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    cursor: pointer;
    height:30px;
    background: url('/img/bg/submit.jpg');
    border: none;
    border-radius: 10px;
    color: #960000;
}
.alert{
    float: left;
    width: 100%;
    margin-top: 5px;
    color: #C00;
    display:none;
}
#adminLoginForm{
    float: left;
    width: 350px;
    height: 170px;
    margin-left: 325px;
    margin-top: 150px;
    background: url('/img/bg/b15.jpg');
    border-radius: 10px;
    box-shadow: 0px 0px 10px #A38D77;
    padding-top: 10px;
}
#adminLoginForm label{
    float: left;
    width: 150px;
    text-align: right;
    font-weight: bold;
    color: #000000;
    font-size: 15px;
    margin-top: 20px;
}
#adminLoginForm input{
    float: left;
    width: 150px;
    margin-top: 19px;
    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
#adminLoginForm input.loginSubmit{
    width:130px;
    margin-left:111px;
}

Output in Chrome & Firefox

Output in IE

I know the border-radius and box-shadow not works in IE. But I don't know why the gap between the label and text-boxes in IE. Can anybody help me to resolve this..?

Answer 1

If you wrap the contents of the form in a div that then becomes the only child of the form, the issue is fixed:

HTML:

<form id="adminLoginForm">
    <div>
        <label>User Name :</label>
        <input type="text" class="uname"/>
        <label>Password :</label>
        <input type="password" class="pwd"/>
        <input type="submit" class="loginSubmit submit" value="SUBMIT"/>
        <p class="alert loginAlert">Test alert</p>
    </div>
</form>

I thought of this because I recall (back in the days when it seemed XHTML would become the new web standard) that, with XHTML, native inline elements (like <label> and <input>) are not valid children of the <form> element.

I don't think that's the case with regular HTML, but the point is that the <form> tag and the various <input>elements are rather special, and tend to follow their own CSS formatting rules.

Answer 2

try to use table pattern for these type of designs..best compatibility trick for all browsers..

<div id="wrapper">
<div id="page">
    <form id="adminLoginForm">
    <table>
        <tr><td><label>User Name :</label></td><td><input type="text" class="uname"/></td></tr>
        <tr><td><label>Password :</label></td><td><input type="password" class="pwd"/></td></tr>
        <tr><td colspan="2" style="text-align:center;"><input type="submit" class="loginSubmit submit" value="SUBMIT"/></td></tr>                        
    </table>
        <p class="alert loginAlert">Test alert</p>
    </form>
</div>
</div>