Browser Issue...with IE

HTML & CSS
1

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>

                &lt;legend&gt; Partner / Client Login: &lt;/legend&gt;
                &lt;label&gt;
                    &lt;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:'"/&gt;
                    &lt;input type="text" value="password:" onfocus="if(this.value=='password:') this.value='';" onblur="if(this.value=='') this.value='password:'"/&gt;
                    &lt;input name="gobutton" type="image"  src="go_button.png" class="go_botton" /&gt; &lt;br /&gt;
                     &lt;input type="checkbox" id="rem_pass" name="top1" value="remember_password" /&gt;remember password 
                     &lt;span&gt; &lt;a href="#"&gt; forgot password &lt;/a&gt;&lt;/span&gt;
                     &lt;br /&gt;
                      &lt;/label&gt;   
                    &lt;/fieldset&gt;
            
            
            &lt;/form&gt; 
        	
         &lt;/div&gt;

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;}

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