Forum Moderators: not2easy

Message Too Old, No Replies

Form text input box displaying differently across multiple browsers

Styling form text input

         

BadBoyMcCoy

9:39 am on Oct 7, 2008 (gmt 0)

10+ Year Member



OK Ive used this site as a reference before but this is the first time ive posted. Go me

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

BadBoyMcCoy

10:33 am on Oct 7, 2008 (gmt 0)

10+ Year Member



Sorry I forgot to mention my doctype is xhtml Strict