Form padding differences in Firefox and Opera/Chrome/IE

Question

Hi!

I'm having a problem with the padding in my form on my website. If I've set a height/width to a form element and then adds a padding to it. In all browsers I've tried, except Firefox, the padding is added to the height/width.

If I have a input with 200 in width and 20px in height. and padding at 5 (all ways), the sum and total width and height would be 210px and 30px, but in Firefox it is 200px and 20px.

How do I work my way around this?

Answer 1

Have you tried putting display:block on the form? It sounds like FF might possibly be treating it like it was an inline element.

Answer 2

Try to use a CSS framework such as blueprint-css. Take a look the example pages that ship with blueprint (there's a file called forms.html). This should solve your padding problem as well as a bunch of other problems you may encounter.