CSS image button not right

Question

Go this tag:

<a href="javascript:{}" onclick="document.getElementById('_paypal').submit(); return false;"><span id="order_now_btn">Order Now</span></a>

Here's the CSS:

#order_now_btn {
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  height: 33px;
  width: 111px;
  display: block;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  color: #fff;
}

Problem is, I can't get the text to fit in the right place...

Here's the button image:

Is there a better way to do this? I have quite a few of these to do.

Answer 1

I decided to go with the button tag, this works great.

<button type="submit" id="order_now_btn" width="111" height="33" align="absmiddle" alt="Order Now" /><span>Order Now</span></button>

#order_now_btn {
  color: #fff;
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  border: 0;
  height: 33px;
  width: 111px;
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
}

#order_now_btn span {
  position: relative;
  left: 12px;
}

Answer 2

just add padding-left:30px; and padding-top:10px; in #order_now_btn .This will position your text in the correct place.

Answer 3

You have to position the text above the image.

Check these

http://www.the-art-of-web.com/css/textoverimage/

http://frinity.blogspot.com/2008/06/placing-text-over-image-using-css.html

Answer 4

Just need to add some padding:

padding:10px 0 0 30px;

http://jsfiddle.net/6fX5v/