Marcel 57

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?


2 answers

Ktash 1851


#ctrl_1_submit {
    vertical-align: top;

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


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.

Answered over 8 years ago by Ktash
  • I still have the text in Safari aligned right and Firefox does the job bad. (Probably 1-2px higher in the field, not centered) Marcel over 8 years ago
  • I see what you mean... There may not be a (easy) fix for that. Let me look into it and I'll update if I get something. Ktash over 8 years ago
  • Updated my answer. Ktash over 8 years ago

Try changing the padding from 14px to 13px

.newsletter input.text {padding: 14px 8px 13px 22px;}


.newsletter input.text {padding: 13px 8px 13px 22px;}
Answered over 8 years ago by Rui Santos
  • Yeah I tried all that. But like I said then isn't right for Safari anymore, which renders it right after adding Font-size and padding. Marcel over 8 years ago