CSS圖像按鈕不對

Question

轉到本文標籤：

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

這裏的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; 
} 

問題是，我不能讓文本以適應在正確的地方.. 。

這裏的按鈕圖像：

有沒有更好的方法來做到這一點？我有很多這樣的事情要做。

Answer 1

我決定去按鈕標籤，這很好。

<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

只需要添加一些填充：

padding:10px 0 0 30px; 

http://jsfiddle.net/6fX5v/

Answer 3

你必須像上面的文本的位置。

檢查這些

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

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

Answer 4

只需添加padding-left:30px;和padding-top:10px;在#order_now_btn。這將使在正確的位置文本。