Firefox does not render width and height properties of the A tag as expected

Question

My goal here is to make a button. I want the text to sit vertically in the middle of the image, and horizontally offset by 22px. The image is 144px by 29px. Here's the code:

CSS:

<style type="text/css">
a.button{
width:144px;
height:29px;
background-image:url('images/btnOff.gif');
color:#000;
text-decoration:none;
line-height:28px;
padding-left:22px;
}

a:hover.button{
background-image:url('images/btnOn.gif');
}

HTML:

<a href="download.php" class="button">Download</a>

It works exactly as I expected in IE, but in FF, I just get the text (without the new line-height) with a little bit of the background image showing, and the right side of the image after the text is lopped off. It appears to me that neither height nor width nor line-height are being applied properly.

Is there something I am doing wrong? Is there a better way to accomplish my goal?

Answer 1

Add in this code:

display:block;

Anchors are an inline element, and therefore don't typically have a height and width attribute.

Once it's a block, don't use line height, just use the box model as usual. Margins for the outside, padding for the inside, and height/width for any other futzing that's necessary.