Yesterday, I asked https://stackoverflow.com/a/212960/ for a problem with stock / addition in Firefox. I got an answer and accepted it. Today I realized that my problem has not been resolved. So, I am posting a new question.
Jsfiddle - problem
Jsfiddle - problem solved
CSS
.btn { text-align: center; color: #333; font-weight: 700; font-size: 11px; font-family: tahoma, verdana, arial, helvetica; background: -webkit-linear-gradient(#fefefe, #e7e7e7); background: -o-linear-gradient(#fefefe, #e7e7e7); background: -moz-linear-gradient(#fefefe, #e7e7e7); background: linear-gradient(#fefefe, #e7e7e7); height: 24px; width: auto; overflow: visible; border: 1px solid #c4c4c4; padding: 0 10px; line-height: 22px; border-radius: 3px; } .btn:hover { color: #111; border: 1px solid #555; }
Html
<input type="submit" value="Submit" class="btn" />
The problem is that this button does not look normal in Firefox:
I made the solution proposed by Ant:
.btn::-moz-focus-inner { padding:0; border:0; }
Later I discovered that it only works if there is a text field <input type="text"...> in front of the submit button. If the text box is missing, for some strange reason, the problem still exists. I partially deleted the entire css file to see that some rules in the css file are causing the problem. It did not help. I created a new file with the following contents:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <style type="text/css"> .btn { text-align: center; color: #333; font-weight: 700; font-size: 11px; font-family: tahoma, verdana, arial, helvetica; background: -webkit-linear-gradient(#fefefe, #e7e7e7); background: -o-linear-gradient(#fefefe, #e7e7e7); background: -moz-linear-gradient(#fefefe, #e7e7e7); background: linear-gradient(#fefefe, #e7e7e7); height: 24px; width: auto; overflow: visible; border: 1px solid #c4c4c4; padding: 0 10px; line-height: 22px; border-radius: 3px; } .btn:hover { color: #111; border: 1px solid #555; } .btn::-moz-focus-inner { padding:0; border:0; } </style> </head> <body> <input type="submit" value="Submit" class="btn" /> </body></html>
The same problem - it looks different in Firefox. Only in Jsfiddle is everything okay.
So I'm looking for some kind of solution. A button looks ugly in Firefox if the top margin is larger than the bottom margin.