Link and button height not the same in Firefox

Question

I have a link and a button sitting next to each other on a page. The CSS code effecting them is identical, but the input is just a bit shorter in height than the input - any suggestions about how to make them the exact same height? JSFiddle

HTML:

<input type="submit" value="Input"> <a href="#">Link</a>

CSS:

input[type="submit"], a:link, a:visited {
background-color: #4eb4df;
border: none;
  font-family: arial;
  color: #ffffff;
  border-radius: 4px;
  padding: 5px 20px;
  font-size: 1.2em;
  text-shadow: 1px 1px #6d6d6d;
  display: inline-block;
  margin: 30px auto 10px;
  text-transform: uppercase;
  text-decoration: none;
}
input[type="submit"]:hover, input[type="submit"]:active, a:hover, a:active {
  background-color: #3e94b9;
}

Just make the value of the link and button the same. The text sets the width. Why do you need them to be the exact same width? — www139, Oct 11 '15 at 23:27
I should have stated my question better - I'm actually looking for them to be the same height, not the same width. Sorry about that! — user44531, Oct 11 '15 at 23:48
They are the same height already. I even checked in the web inspector. I'm using Safari 9. — www139, Oct 11 '15 at 23:53
This is what it shows in Firefox: [screenshot](http://smallemperor.com/screenshot.png) — user44531, Oct 12 '15 at 00:16

score 1 · Answer 1 · answered Oct 11 '15 at 23:31

1

The link is shorter because the text on it is shorter. If you want to force a width, You can add a value of width or min-width. In this case you will also want to get rid of the left and right padding, and probably align the text in the center.

input[type="submit"], a:link, a:visited {
    min-width: 100px
    padding: 5px 0;
    text-align: center;
}

answered Oct 11 '15 at 23:31

Jasna Todorovic

41
1

Thanks for your help, but I meant that I want them to be the same height, not the same width. – user44531 Oct 11 '15 at 23:42

score 1 · Accepted Answer · edited May 23 '17 at 10:27

Firefox appears to render the height of input elements differently than other browsers. This is very annoying but the code below explains about how to remove the added height.

I did some research and figured it out. It appears to be a bug with Firefox. Here is a another question which covers it Buttons too tall on Firefox. Here is an article which explains with more information http://davidwalsh.name/firefox-buttons.

Here is a jsfiddle https://jsfiddle.net/www139/e9gg7ncu/2/.

Here is a code snippet (remember that this is only relevant to the Firefox browser).

input[type="submit"], a:link, a:visited {
    background-color: #4eb4df;
    border: none;
    font-family: arial;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 20px;
    font-size: 1.2em;
    text-shadow: 1px 1px #6d6d6d;
    display: inline-block;
    margin: 30px auto 10px;
    text-transform: uppercase;
    text-decoration: none;
    font-size:1em;
}
input[type="submit"]:hover, input[type="submit"]:active, a:hover, a:active {
    background-color: #3e94b9;
}
input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

<input type="submit" value="Input"> <a href="#">Link</a>

Exactly what I needed! Thank you! – user44531 Oct 12 '15 at 05:50 — user44531, Oct 12 '15 at 05:50

score 0 · Answer 3 · answered Oct 11 '15 at 23:30

0

Edit the class to the following, set the width to be the same and make sure you use box-sizing so that the width and height includes content, padding and border.

input[type="submit"], a:link, a:visited {
    background-color: #4eb4df;
    border: none;
    font-family: arial;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 20px;
    font-size: 1.2em;
    text-shadow: 1px 1px #6d6d6d;
    display: inline-block;
    margin: 30px auto 10px;
    text-transform: uppercase;
    text-decoration: none;
    text-align:center;
    width:250px;
    box-sizing:border-box;
}

answered Oct 11 '15 at 23:30

Benneb10

1,419
1
8
13

Hi there! Thanks so much for your help, but I actually need them to be the same height, not the same width. – user44531 Oct 11 '15 at 23:47
1

Oh haha, well according to the inspecter they both have 32px height – Benneb10 Oct 12 '15 at 00:04
This is what it shows in Firefox: [screenshot](http://smallemperor.com/screenshot.png) – user44531 Oct 12 '15 at 00:15
I don't have firefox on this computer, but try playing with the height properties and box-sizing in css. Specifying positioning may also help. – Benneb10 Oct 12 '15 at 00:20

Link and button height not the same in Firefox

3 Answers3