Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox adds 1px on my submit button

I'm trying to design my form via CSS. Problem is that I need a "standard" submit and a hyperlink which is styled like a button with CSS.

My CSS currently looks like that:

    form .buttons input[type=submit], form .buttons a { padding: 0; margin: 0; } 
    form .buttons input[type=submit], form .buttons a { font-family: Tahoma, sans-serif; font-size: 14px; text-decoration: none; font-weight: bold; color: #565656; }
    form .buttons input[type=submit] { border: 1px solid black; }
    form .buttons a { border: 1px solid black; }

In Firefox I have the problem that there is a 1px padding added around the submit button (like you can see on the screenshot).

Firefox CSS problem

Is there a solution how I can solve this problem?

like image 722
mhmpl Avatar asked Oct 01 '11 12:10

mhmpl


2 Answers

input[type="submit"]::-moz-focus-inner { 
    border: 0px;
    padding: 0px;  
}
like image 112
Karolis Avatar answered Oct 21 '22 19:10

Karolis


Try also "line-height: normal;" it fixed a bug in IE as well.

like image 30
SequenceDigitale.com Avatar answered Oct 21 '22 20:10

SequenceDigitale.com