CODEWITHSUNDEEP
firefoxbuttonheight
Nathan Osman
Nathan Osman

Reputation: 73305

Button height rendering inconsistency in Firefox - why are input elements taller?

Consider the following two elements:

<button type="submit" class="button">Test</button>
<a href="#" class="button">Test 2</a>

...which use the following style definition:

.button {
    background-color: yellow;
    color: white;
    border: 1px solid orange;
    display: inline-block;
    font-size: 24pt;
    padding: 2px 16px;
    text-decoration: none;
}

This produces two buttons beside each other with an equal height in Chrome. However, Firefox renders the button on the left with a height 1px greater than the button on the right (the <a>):

enter image description here

  (I've enlarged the image above by 2x.)

What do I need to do to get the two buttons to have the same height? It seems like the font-size is causing the problem - but I need that attribute.

Fiddle: http://jsfiddle.net/FfRPY/

Upvotes: 2

Views: 935

Answers (2)

Nathan Osman
Nathan Osman

Reputation: 73305

Eureka!

The solution in this answer completely eliminates the height difference:

.button::-moz-focus-inner {
  border: 0;
}

Upvotes: 3

Lalit Guglani
Lalit Guglani

Reputation: 46

Use This Code :

.button {
    background-color: yellow;
    border: 1px solid orange;
    color: white;
    display: inline-block;
    font-family: arial;
    font-size: 24pt;
    line-height: 40px;
    overflow: visible;
    padding: 2px 16px;
    text-decoration: none;
    vertical-align: top;
}

<a href="#" class="button">Test 2</a>
<input type="submit" class="button" value="Test 2"/>

Upvotes: 0

Related Questions