Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form padding differences in Firefox and Opera/Chrome/IE

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?

like image 659
guzh Avatar asked Aug 30 '09 18:08

guzh


People also ask

Why is CSS different in Web browsers?

It look different because each browser has his own CSS style defined. This styles apply to the HTML markup when no other CSS is defined inline or comes from an external CSS file. That's the reason why a lot of websites using a "Reset. css".

Does Firefox support WebKit?

It is also available for Android and iOS. However, as with all other iOS web browsers, the iOS version uses the WebKit layout engine instead of Gecko due to platform requirements.


2 Answers

Give the input this CSS:

box-sizing: border-box;

You can read more about box-sizing on QuirksMode, the W3C spec, and MDN. Here is its browser support. Use the prefixes -moz- or -webkit- if required by your target browsers.


This answer had previously suggested the value initial, which I had found by using the up/down arrow keys in the Chrome Web Inspector. But it turns out that initial is a CSS keyword, applicable to any property, that represents the initial value of the property – the browser’s default value. initial is less safe than explicitly naming which box model to use. If box-sizing: initial were specified and a browser’s default value for box-sizing changed, the input’s padding could break again.

like image 145
Rory O'Kane Avatar answered Sep 22 '22 09:09

Rory O'Kane


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.

like image 33
Christoph Schiessl Avatar answered Sep 22 '22 09:09

Christoph Schiessl