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 w

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)