Buttons too tall on Firefox

Question

I've got a problem unique to Firefox. I'm trying to style links and buttons to look exactly the same. On every browser except Firefox, this works as desired. On Firefox, the height of the button's content is 18 pixels, compared to 15 pixels for the link. On Chrome, Safari, and Internet Explorer, they're both the proper 15 pixels tall. Why is this?

Here's a demo on jsFiddle of the problem. Here's the result I get on Chrome:

Result on Chrome

and here's the Firefox result:

Result on Firefox

I've tried changing the height manually in CSS, but that doesn't entirely work and breaks the layout on other browsers. Setting -moz-appearance: none does nothing, but then again, it usually doesn't.

Here's a full detail of my attempt, too, and what it's going to be used for.

Has anyone come across this problem before? How can I equalize the height across all browsers?

score 13 · Accepted Answer · edited May 16 '13 at 15:42

13

Found another user who used this:

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

http://jsfiddle.net/MCAllinder/dehda/2/

edited May 16 '13 at 15:42

Ry-

218,210
55
464
476

answered Jan 14 '12 at 03:49

lambgrp425

706
1
8
20

score 3 · Answer 2 · edited Aug 07 '13 at 13:39

3

I've found a complete solution and wrote about it here:

http://davidwalsh.name/firefox-buttons

input::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:-2px; 
    margin-bottom: -2px; 
}

You need to modify the margin-top and margin-bottom to match your other buttons

edited Aug 07 '13 at 13:39

icc97

11,395
8
76
90

answered May 16 '13 at 14:54

David Walsh

264
1
4
6

1

If you could summarize your article here too, that would be great! Link-only answers are discouraged. And thanks. However, using your magic margin numbers, buttons are now four pixels too short for me - Firefox 20.0.1 for Linux and Windows. How does [this fiddle](http://jsfiddle.net/MCAllinder/dehda/2/) look to you? It's perfect here, but if you find it a little too tall, then it could be an OS-specific thing :( – Ry- May 16 '13 at 15:45
These have really stuck around too long. -1 – Ry- May 18 '13 at 15:00
@minitech The `margin-top` / `margin-bottom` will be dependent on any other css that you have that is modifying the `input`. So I don't think that it is OS specific. In my case 3px was the magic value. – icc97 Aug 07 '13 at 13:27
1

@icc97: No, it’s OS- and OS-setting-specific. I tested it pretty thoroughly. Varies from ~1-6px by default. – Ry- Aug 07 '13 at 14:36

Buttons too tall on Firefox

2 Answers2

Linked