See the text fields on this page:
http://bit.ly/aJb439

Notice how the text inside them appears lower down in Safari and Chrome, whereas in other browsers it sits nicely in the centre (the vertical centre that is).

It's annoying because it's all down to IE too! Seeing as it can't add background images to textfields properly, I had to throw a lot of <div>'s in there and apply the background image to them.

The only way I can fix it in Chrome and Safari is by changing the top margin one the associated elements like so:

form div div input, form div div textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
color:#616261;
font-family:arial,helvetica,sans-serif;
font-size:18px;
height:30px;
margin:0 10px 0;
width:430px;


}

But then it messes up in the other browsers!

Is there a way I can fix this?

Cheers

Try to define line-height: 30px; (or less) to see what is happened.

I tried that but it didnt work

Luckily I've managed to figure it out! I simply removed the height property from the input field and moved it to 'form div div' instead.

thanks anyway