CODEWITHSUNDEEP
htmlcss
Dónal
Dónal

Reputation: 187419

make button and links height identical

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?

Update

I'm not bothered about supporting IE <= 7

Upvotes: 4

Views: 2776

Answers (4)

sandeep
sandeep

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

thirtydot
thirtydot

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

random_user_name
random_user_name

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

Karl Barker
Karl Barker

Reputation: 11391

The following CSS rule would work in your case:

.buttonHolder * { height:17px; }

Upvotes: 0

Related Questions