Input form and cross browser compatibility

HTML & CSS
1

Hi Guys,

i am creating a simple input form and styling it with css, my problem is i cant get it to look the same in all browsers

here is what it looks like in different browsers http://j.imagehost.org/0640/form_5.jpg

safari and firefox display it correctly

ie8 and chrome do not display the submit button correctly, the font sizes are different and the width and height are not the same so we have some extra padding on the right of the form

there is a big paragraph margin in ie6 and ie6 and the submit button is too big in these browsers

here is my css

body{
    margin:0;
    padding:0;
    font-size:63%;
    font-family:arial, sans-serif;
    line-height:18px;
    color:#333333;

p{
    font-size:1.2em;
}

#banner{
    width:980px;
    height:300px;
    background:transparent url(../images/banner_bg.png);
    margin:0;
    float:left;
}

#subscribe {
	float: right;
	clear:both;
	padding: 27px 18px 0px 0px; /*top was 27px*/
}

#subscribe p {
	margin-bottom: 1px;
	padding: 0px;
}

form#email {
	color: #ccc;  
	text-align: right;  
}

#email .text {   
	width: 195px;
	height: 17px;
	padding: 3px;
	border: #ccc 1px solid; 
}

#email .submit {
	font-size: 1.0em;
	background-color: #009999;  
	color: #FFFFFF;
	border: #ccc 1px solid;
	padding: 4px 5px;
}
}

here is my html

  <div id="banner">
        
        <div id="subscribe">
        <p>Please type your email below:<br />
        <form name="email" id="email" method="post" action="#">    
 		<input name="email_field" type="text" id="field" class="text"  />
		<input type="submit" name="Submit" value="Submit" class="submit" /> 
		</form>
        </div>
        
        
        </div><!--closes banner-->
2

ok then other option you have is to declare margin, padding, display option for all div if there is no value make it 0.

3

using the reset now will have to mean recoding the site :nono:

4

I think the option can be using the css reset first and start doing from there.