Dear All,

I am making login form when I am testing it on Google Chrome and Firefox It is working fine but in IE8 the alignment of the form is not showing proper, I am attaching images and Code for your reference, please help me out how I can fix this error in my css or in HTML. I also want to align my Check Box text in to Middle it is coming in bottom I used vertical align property but its not working, or if you have any another way to make it easy please help me out..

Below are HTML:
<div class="login_dtls1">
<form action="" id="loginform" method="post">
<fieldset>

<legend> Partner / Client Login: </legend>
<label>
<input type="text" value="user name/Email:" onfocus="if(this.value=='user name/Email:') this.value='';" onblur="if(this.value=='') this.value='user name/Email:'"/>
<input type="text" value="password:" onfocus="if(this.value=='password:') this.value='';" onblur="if(this.value=='') this.value='password:'"/>
<input name="gobutton" type="image" src="go_button.png" class="go_botton" /> <br />
<input type="checkbox" id="rem_pass" name="top1" value="remember_password" />remember password
<span> <a href="#"> forgot password </a></span>
<br />
</label>
</fieldset>


</form>

</div>

Below are CSS:

.login_dtls1{width:320px; min-height:77px; float:left; margin:5px 0 8px 30px; clear:both; }

#loginform {margin: 0 auto;}
#loginform fieldset {border:2px solid #999999; width:280px; min-height:63px; margin: 0 0 0 20px; background:url(Login%20form_bg.jpg) repeat-x; position:static;}

#loginform legend {color:#fff; background:#4b5360;border:2px outset #f8f6f7; padding: 2px 5px 2px 5px; font-weight:normal; font-size: 12px;}
#loginform label{font-size:10px; color:#fff; height:200px;}
#loginform label span {padding-left:20px; padding-bottom:5px; }
#loginform label span a { color:#fff; text-align:right; text-decoration:none; }

#loginform input[type=text]{color:#666; font-weight:normal; text-transform:lowercase; font-size:12px; border: 1px solid #333333; padding-left:3px; width:110px; margin-top:5px; }
#loginform label.checkbox {position: static;}
#loginform label span {padding-left: 25px; font-size: 10px; vertical-align: middle;}
#loginform .checkbox input {width: auto; height: auto; vertical-align: middle;}
#loginform label .go_botton { float:right; margin:0 0 0 0px; padding:0; width:30px; height:30px; border:none; }

#loginform #rem_pass{width:auto; height:auto;}


prnt_scr_chrome-2.jpg

prnt_scr_firefox-2.jpg

prnt_scr_IE8-2.jpg

go_button_grey333.png


Please have a look into this code and images and how I can fix alignment in IE like chrome and firefox, please suggest me..


Warm Regards