Recently in one of my web projects I ran across a frustrating bug in Firefox. When I defined a text input and a button input with the very same CSS styling rules they did not have the same height. Instead the button control appeared to be about two pixels taller than the input control:
Safari:
Firefox:
Internet searches revealed numerous possible fixes, from adding a DOCTYPE to the page, to trying to find work arounds for line-height. Now of them worked. I finally tracked the problem down to a default CSS rule in Firefox that can easily be fixed using the following CSS code:
button::-moz-focus-inner{padding:0; border: none;}
For some reason the default CSS stylesheets are set to add extra padding and an invisible transparent border to the inside of button controls, making them larger than text areas styled with the exact same CSS code. This makes absolutely no sense, but fortunately you can easily fix this by adding the above line of CSS to your stylesheet, or better yet add it to the CSS reset you use in all your web design work.
Safari:
Firefox:
Internet searches revealed numerous possible fixes, from adding a DOCTYPE to the page, to trying to find work arounds for line-height. Now of them worked. I finally tracked the problem down to a default CSS rule in Firefox that can easily be fixed using the following CSS code:
button::-moz-focus-inner{padding:0; border: none;}
For some reason the default CSS stylesheets are set to add extra padding and an invisible transparent border to the inside of button controls, making them larger than text areas styled with the exact same CSS code. This makes absolutely no sense, but fortunately you can easily fix this by adding the above line of CSS to your stylesheet, or better yet add it to the CSS reset you use in all your web design work.
1 comment so far. What are your thoughts?
You Saved me! Thank you!!!!
I had to add this rule too:
input[type="button"]::-moz-focus-inner {
padding:0; border: none;
}