21

In firefox 3.6 you could use ::-moz-focus-inner {border:0;padding:0;margin:0;} to remove those default margins and paddings forms.css added.

How can I reset this in Firefox 4? I've been searching for any .css files inside the install directory that could add styles to my button but can't find any for ff4 - the button still gets that annoying 1px top padding that won't allow the text to align to vertical middle.

http://easwee.net/other/FF_problem.gif

EDIT: I use a reset stylesheet so no need to reset styles. It's a browser stylesheet that's messing here.

easwee
  • 15,757
  • 24
  • 60
  • 83

4 Answers4

26

I actually found the solution myself.

In your url field type: resource://gre-resources/forms.css - this will open forms.css for FF4 - and search for the following selector

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner

Now just put that in your main stylesheet like:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

It shouldn't be overriding your css anymore. Also note that if you haven't defined any font style for your inputs FF won't inherit body font styling.

easwee
  • 15,757
  • 24
  • 60
  • 83
  • Thank you. Sadly, finding those css resource files is no longer applicable in Firefox 6; however, this resolved my issue still. –  Sep 26 '11 at 20:38
  • 3
    @PatrickRobertSheaO'Connor In ff6 it got changed to `resource://gre-resources/html.css` – easwee Oct 12 '11 at 13:13
  • +1 so many thanks... it was too frustrating trying to figure out the persistent border.. – Gabriele Petrioli Jan 03 '12 at 14:17
  • Thanks, was burned by this myself. A minor note though: margin:0 seems unnecessary as Firefox doesn't define it itself. – Damir Zekić Feb 17 '12 at 12:35
  • @Damir Zekić Maybe in latest versions - in older it is needed. – easwee Feb 17 '12 at 12:57
  • A year later, I would suggest to have a look at Bootstrap's `reset.less` which goes a long way towards harmonizing browser quirks for forms. Also see [my answer](http://stackoverflow.com/a/10108303/593036) below. – julien_c Apr 11 '12 at 14:47
  • In the Developer Tools in the Inspector in the Computed tab it shows the style being affected and has a link for opening the forms.css file. I found this question by searching for "resource://gre-resources/forms.css". – Sam Hobbs Nov 27 '18 at 03:05
1

Twitter Bootstrap does it like this in its reset.less (which is a more barebones version of normalize.css):

button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}

As an aside, Bootstrap's reset.less is probably a more reliable and perennial solution to achieve form cross-browser-ness than maintaining your own rules. It's much more complete than Meyer's reset.css, but more minimalist than normalize.css.

julien_c
  • 4,942
  • 5
  • 39
  • 54
1

try setting it's values to undefined (border:undefined etc). not sure here, but it worked for me when I had a similiar problem.

wildcard
  • 7,353
  • 3
  • 27
  • 25
0

just use a css reset stylesheet, that will reset all the default css for most browsers

http://meyerweb.com/eric/tools/css/reset/

or read this stackeoverflow Q&A

https://stackoverflow.com/questions/116754/best-css-reset

Community
  • 1
  • 1
Christophe
  • 4,798
  • 5
  • 41
  • 83
  • No it won't. I'm using a reset stylesheet. Read the question again to get what I'm reffering to. – easwee Mar 28 '11 at 13:57
  • yes but even if you find that css file in firefox the change will still only apply to you and nobody else – Christophe Mar 28 '11 at 14:00
  • It will apply to everyone once I find which selector is adding that and I override it with a more specified selector in my main stylesheet. It always worked in all FF versions till now. – easwee Mar 28 '11 at 14:04
  • oh yes I see. Well looks like you found it :) – Christophe Mar 28 '11 at 14:34
  • Yeah - maybe my question was bit unclear - edited few words for future if anyone searches for this. – easwee Mar 28 '11 at 14:39