CSS issues in IE - html

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>