Forum Moderators: not2easy
I have a couple of search boxes on a page on a site I'm currently working on and it seems no matter what I try its displaying differently in firefox opera ie and safari.
heres the broken down css
* {margin:0; padding:0;}
body {margin:200px;}
form.searchbox {
width:200px;
border:1px solid #0066CC;
background-color:#FF0000;
margin:0 auto;
}
form.searchbox input {
border:0px;
width:100%;
background-color:#66FF00;
height:1.2em;
}
And the html
<form class="searchbox"><input type="text" /></form>
here are the differences I have noted
IE6 / 7
Extra top pixels: 1px
Extra bottom pixels: 1px
Text Input box height: 16px
Form total height: 20px
Firefox 3
Extra top pixels: 3px
Extra bottom pixels: 1px
Input box height: 16px
Form total height: 22px
Opera 9.27
Extra top pixels: 2px
Extra bottom pixels: 1px
Input box height: 16px
Form total height: 21px
Safari
Extra top pixels: 3px
Extra bottom pixels: 2px
Input box height: 13px
Form total height: 20px
These are the only browsers I've checked and I'm on windows
So does anyone know how to get them to display the same? preferably without hacking the hell out of the code.
TIA
Cian McCoy