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