Reputation: 187419
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:
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?
I'm not bothered about supporting IE <= 7
Upvotes: 4
Views: 2776
Reputation: 92873
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;
}
Upvotes: 4
Reputation: 228302
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;
}
Upvotes: 5
Reputation: 26180
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).
Upvotes: 2
Reputation: 11391
The following CSS rule would work in your case:
.buttonHolder * { height:17px; }
Upvotes: 0