Applying same styling to an and an tag results to different layout

Question

I have a CSS class for styling buttons. When I apply it to an <input> and an <a> tag, the <a> is a bit smaller than the <input>. This problem occurs in Firefox (33), but in Chrome (38) it looks fine.

Here is a minimal example:

.my-button {
  display: inline-block;
  padding: 1em;
        
  border-radius: 0.2em;
  border: 1px solid #000;
        
  line-height: 1em;
  font-size: 13px;
  text-decoration: none;
    
  background-color: #ccc;
  color: #000;
}

<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>

You can see it also here: http://jsfiddle.net/tr4vbrha/4/

The answer to the suggested duplicate question is to recreate the buttons with divs using javascript, which I believe is a very dirty solution. — eyettea, Nov 10 '14 at 18:15
You read the wrong answer. [Read again](http://stackoverflow.com/a/11605890/1493698). Or if you have trouble finding the correct answer, [see a fiddle](http://jsfiddle.net/nvaj578e/). — Antony, Nov 11 '14 at 01:19
OK, thanks. This seems to solve it for both Firefox and Chrome, however the `padding: 0 !important;` is not required [see fiddle](http://jsfiddle.net/nvaj578e/1/). Could this be a bug that should be reported to Firefox? — eyettea, Nov 11 '14 at 07:57
That answer is just an overkill. Just pick the one that works and move on. And no, this is not a bug. The fact that Firefox has its own margin that can be targeted via prefixed selectors are most likely a hack. What we are doing here is just to unhack the hack. — Antony, Nov 11 '14 at 09:02

score 1 · Answer 1 · answered Nov 10 '14 at 16:39

1

This happens because of a difference in font. The input on windows is Microsoft Sans Serif, while in the a tag it is Times New Roman.

To fix this add the font-family property to the my-button class.

answered Nov 10 '14 at 16:39

muuk

932
1
7
15

I don't think this solves the problem, adding `font-family: Arial;` doesn't change anything: http://jsfiddle.net/tr4vbrha/7/ – eyettea Nov 10 '14 at 16:44
I saw the difference in Firefox too and when I added code font-family: "Times New Roman", Georgia, Serif; They look the same. – userDEV Nov 10 '14 at 16:51
On Mac OSX Firefox 33.1 and on Ubuntu 14.04 Firefox 33.0 the problem occurs no matter the font-family. I cannot verify for Windows though. In Safari 7.1 it works fine. – eyettea Nov 10 '14 at 17:01
Yes I noticed, sorry I thought it would be it – muuk Nov 10 '14 at 18:12

score 1 · Answer 2 · edited Nov 10 '14 at 18:53

1

This probably is because the box-sizing property of button is different to that of a button. I added this:

input{
    box-sizing: content-box;
}

.my-button{
    min-width: 2.75em;
}

and it worked

edited Nov 10 '14 at 18:53

eyettea

1,376
2
16
35

answered Nov 10 '14 at 17:02

Absalon Castañon

359
5
18

It doesn't seem to change something: http://jsfiddle.net/tr4vbrha/10/ None of the `box-sizing` values at the input tag changes something. – eyettea Nov 10 '14 at 17:05
First: I forgot that -moz- is needed before box sizing. – Absalon Castañon Nov 10 '14 at 17:37
Second: Using develop tools it worked with 2.75em but saving it to a file it worked with 3em(the diff is one pixel). I don't know why it doesn work on jsfiddle – Absalon Castañon Nov 10 '14 at 17:42

vrajesh · Answer 3 · 2014-11-10T17:39:20.210

0

remove css attribure : display:inline-block see example :demo

.my-button {

    padding: 1em;
    
    border-radius: 0.2em;
    border: 1px solid #000;
    
    line-height: 1em;
    font-size: 13px;
    font-family: Arial;
    text-decoration: none;

    background-color: #ccc;
    color: #000;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .my-button {
        display:inline-block
    }
}

<input class="my-button" type="submit" value="Save">
<a href="#" class="my-button">Cancel</a>

edited Nov 10 '14 at 17:39

answered Nov 10 '14 at 17:08

vrajesh

2,935
3
25
40

They look differently to me in the fiddle (Firefox on Windows). The cancel button is 1px higher than the save button. – ThiefMaster Nov 10 '14 at 17:10
In Firefox (Ubuntu) your demo works, but in Chrome, the `` tag is now smaller than the ``. – eyettea Nov 10 '14 at 17:13
now please check.............. – vrajesh Nov 10 '14 at 17:40

Applying same styling to an and an tag results to different layout

3 Answers3