In Safari padding of the form renders well, Firefox doesn't.
Text is not on same distcance to border as in Safari (where it is right after adding padding to font-size).

Text-Input in Firefox seems to have a 1px margin on top, which isn't defined in any stylesheet.
I need to give the input submit a top-margin of 1px to make it look right in firefox, but then of course it doesn't fit in Safari, where it is rendered right.

While IE's errors can be fixed with conditional rules annd/or *html, firefox can't be fixed.

Anybody had that problem? Solutions?

Thanks

2 answers

And that seems to work for me. Tested in FF 3.6, Safari (PC) and Chrome.

UPDATE

As for the issue with the text. The underlying cause is that the input box is not big enough for the font-size. You'll notice in Firebug that if you make the box bigger (28px+), more of the text is shown. At the moment, the bottom of the g is cut off, and if you make it bigger, it starts to show. Now, Safari handles this by centering, cutting off some of the top and the bottom, while Firefox cuts off just the bottom.

The solution: There are two ways to 'sovle' this. The first being that you set the height of the box equal to 25px, leaving all other values the same. This does not cut off any more of the g, but shows about a 1px difference in firefox on my screen. The other solution is to reduce the font-size, either of just the text box, or both that and the button. I found that around 22px makes it look around equal in both Safari and Firefox.