CODEWITHSUNDEEP
google-chromeinputsafaricross-browserpadding
user653522
user653522

Reputation:

Input and select-elements has padding added in Chrome + Safari, but not Firefox?

I've noticed that standard input fields and select-elements adds 1 or 2px padding around it in Chrome + Safari, but not Firefox..

You can see a basic example here: http://pastehtml.com/view/aussjg3en.html

Firefox 4.0.1: adds no padding to the elements

Chrome 11.0.696.68: adds 2px padding to top and left on input fields, but only 2px to top on select-elements

Safari 5.0.3: adds 2px padding to top and left on input fields, but only 2px to top on select-elements

But why is that? And can I fix it with some simple CSS rather than doing specific stylesheets for theese to browsers? I just want it to look like in Firefox without the auto padding..

Upvotes: 5

Views: 8849

Answers (2)

The Master
The Master

Reputation: 29

Remove the <input type="search"> to fix the padding issue in chrome.

Upvotes: 2

Joseph Hansen
Joseph Hansen

Reputation: 13279

This question has been addressed before (such as here, just search for "extra padding"), but the Webkit rendering engine adds the padding (Chrome and Safari both use it).

You can solve this through CSS. The rendering engines just have different "default" values. What you would need to do is explicitly tell the elements to have a padding and margin of 0, or whatever you want it to be.

Basically, if you don't want to give different rendering engines the leeway and ability to misinterpret, you need to be explicit in your style sheet.

Upvotes: 1

Related Questions