Menu
Yesterday I asked a question in Stackoverflow about margin/padding problem in Firefox. I got an answer and accepted it. Today I dscovered that my problem is not solved. So, I post 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 OK in Firefox:
I accepted solution suggested by Ant:
.btn::-moz-focus-inner {
padding:0;
border:0;
}
Later I discovered that it works only if a text field <input type="text"...> exists before submit button. If there is no text field, for some strange reason the problem still exists. Part by part I deleted the whole css file to see is some rules in css file are causing the problem. It didn't help. I created a new file with the following content:
<!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 - button looks different in Firefox. Only in Jsfiddle everything is OK.
So, I am looking for some solution. The button looks ugly in Firefox if top margin is bigger than bottom margin.
410
Tested in CH46+, FF DE44+ and IE11+ (below image button order) on W7, remove the ::moz-specific rule and change .btn line-height: 1; and you will yield the following result:
As you can see now IE is one pixel off. But IE also uses a noticable different font-smoothing routine. I saw that before on various sites. I wouldn't spend too much time on correcting pixel differences if I were you as even browser developers can't seem to hack it...
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
