Text in Button positionieren

[karinsc]

Hallo zusammen,

ich habe eine Navigationsleiste, die einen Hover Effekt mit zwei verschiedenen Hintergrundbildern darstellt. Das ganze sieht derzeit so aus:

CSS:
#hauptnavigation {
    position: absolute;
 top: 55px;
 text-align: left;
    font-size: 10px;
 font-family: arial;
 color: #FFF;
 letter-spacing: 0.5px;
    text-transform: uppercase;
 width: 750px;
    }
#hauptnavigation li {
    list-style: none;
    display: inline;
 color: #FFF;
 margin: 0px;
    }
#hauptnavigation a {
    margin-right: 1px;
    float: left;
    width: 135px;
    height: 45px;
    text-decoration: none;
    font-weight: normal;
    border: none;
    background-image:  url(../images/up.jpg);
    background-repeat: no-repeat;
    color: #FFF;
    }
#hauptnavigation a:hover,
#hauptnavigation li.current a:hover {
    background-image:  url(../images/down.jpg);
    background-repeat: no-repeat;
    color: #FFF;
    text-transform: uppercase;
    }

HTML:
 <div id="hauptnavigation">
  <ul>
      <li><a href="1.html">Home</a></li>
      <li><a href="2.html">Home2</a></li>
      <li><a href="3.html">Home3</a></li>
      <li><a href="4.html">Home4</a></li>
      <li><a href="5.html">Home5</a></li>
  </ul>
 </div>

Der Text wird hier oben links angezeigt, und er beginnt genau dort, wo auch das Bild beginnt. Mein Ziel ist es, diesen Text links unten im Button darzustellen und das so, dass er nicht an der gleichen Stelle wie das Bild, sondern etwas weiter eingerückt, beginnt.

Leider bekomme ich das nicht hin, hab schon alles möglich mit padding und margin in allen Varianten ausprobiert, aber daran liegt es nicht, denn es wird immer der Text gleichzeitig mit dem Bild durch diese Aktionen verschoben. Ich komm einfach nicht dahinter, wo das Problem liegt. Hat vielleicht jemand von euch eine Idee?

Vielen Dank für jeden Hinweis!