Question

A web page with a link, an input (submit) and a span. All are styled to have the same look, actually the input is styled to have the same look as the hyperlink and span.

Tested using: Firefox 3.0, 3.6, 4.0, 14.0.1

For some reason, the input is slightly bigger among the others. Also, the text of the input is not aligned with text of link and span. Here’s a live demo.

http://jsfiddle.net/LGftW/

Here’s my CSS:

a{
    text-decoration:none;
}

input[type="submit"]{
    border:0 none;
    background:transparent;
}

a, input[type="submit"], span{
    border:solid 1px green;
    font-size:64px;
    font-family:Arial;
    font-weight:bold;
    float:left;
    padding:0;
    margin:0;
}

Markup:

<a href="#">LINK</a>
<input type="submit" value="INPUT" />
<span>SPAN</span>

So how can I make an input to look like an ordinary link or span? Is it weird a behavior of browser or I just missed some CSS? I’ve been solving this for a day now.

Edit

It seems like the problem occurs only in Firefox. IE8-9 and Chrome display it correctly.

Answer 1

Remove button padding in Firefox by using input::-moz-focus-inner in your CSS:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{
    border: 0;
    padding: 0;
}

EDITED: Updated Demo Link with above code.

SEE DEMO in firefox