make button and links height identical

Question

On this page there's a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don't understand why because they both have the same:

font-size
top and bottom border sizes
top and bottom padding sizes

I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?

Update

I'm not bothered about supporting IE <= 7

You should post your code or a link to a pastebin version of the problem, so that future readers can follow the code discussed in this question. With 28k rep one could assume you'd be aware of that. — kontur, Feb 25 '12 at 15:25

score 4 · Answer 1 · edited May 23 '17 at 12:32

4

You should apply display: inline-block to the a, to match the button which already has display: inline-block.

You also need this to remove the extra spacing in Firefox:

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

edited May 23 '17 at 12:32

Community

1
1

answered Feb 25 '12 at 15:12

thirtydot

224,678
48
389
349

It appears that his site does not support IE7 anyway. I checked it in IE7, and there are worse problems than buttons with the wrong height. Anyway, `display: inline-block; *display: inline; zoom: 1` [makes `inline-block` work in IE7](http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575). – thirtydot Feb 25 '12 at 15:23
@cale_b there is an hack for inline-block for IE7 – sandeep Feb 25 '12 at 15:24

sandeep · Accepted Answer · 2012-02-25T15:45:07.287

4

You have to define height of your buttons.

of Write like this:

a.primaryAction, .primaryAction.matchLink {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    height: 30px;
    padding: 5px 11px;
    text-decoration: none;
}

edited Feb 25 '12 at 15:45

answered Feb 25 '12 at 15:18

sandeep

91,313
23
137
155

height should not be used on buttons – ViliusL Feb 23 '17 at 09:17
`box-sizing: border-box;` was what helped me with this issue, thank you! – Hannah Oct 22 '20 at 20:20

score 2 · Answer 3 · answered Feb 25 '12 at 15:20

This kind of problem can be a real hassle to solve.

Only block elements accept a height. You can use either display:block or display:inline-block to achieve this.

At first, display:inline-block; seems like it's a nice, easy way to go - but is not supported in IE7 or earlier.

So, you can either use inline-block and leave old browsers in the wake, or add a conditional stylesheet for ie7, or you can display:block and give them a width (if it's appropriate).

score 0 · Answer 4 · answered Feb 25 '12 at 15:08

0

The following CSS rule would work in your case:

.buttonHolder * { height:17px; }

answered Feb 25 '12 at 15:08

Karl Barker

11,095
3
21
26

make button and links height identical

Update

4 Answers4