How to style an anchor tag to look like a button with the same height as the button?

Question

I am working on changing the buttons on my site to be styled by a jquery ui theme. Mostly everything is going good with it.

But there are a few anchor tags that I wanted styled as buttons. I added the classes and it styles it how I want it except that the height is not the same. Is there any way to make the styled anchor tag have the same height as the styled button tag?

Here is some of my css:

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0;
    padding: 0 1em;
    height: 2em;
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative;
    text-align: center; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px
}

An example using it on a button:

<button class="mine-button ui-state-default"
 onclick="stuff here">
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add
</button>

An example using it on an achor:

<a class="mine-button ui-state-default" href="bla">
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free
</a>

Answer 1

This should do it:

display: inline-block;

The reason your height isn't working is because the anchor tag marks an inline element. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to work by adding a rule display: -moz-inline-box before the above line.

Alternatively, you could try using the line-height property.

Answer 2

border and align are deprecated attributes, or at least these are about presentation, not content and as such should be done in CSS, not in the HTML code:

.mine-button {
  border: 0;
  vertical-align: bottom/middle/top/whatever;
}

Also, alt is a mandatory attribute of the img element. Can be empty (alt="" for fancy though meaningless images) or meaningful (if image conveys information not already present in text)