align text in a span tag

Question

I am trying to setup a arrow navigation where I have a next and previous button. Needs to be supported in IE 7 and up.

For the next I want the background image to show to the right of the next text. Then of the previous button I want the text to show to the left side of the previous text. I thought this would be easy but I just spent 2 hours on it.

Anyone can help with this before I go crazy.

<span class="next">
<a href="#">Next Month</a>
August
</span>


<span class="prev">
<a href="#">Previous Month</a>
June
</span>

In my css I have this for the left button and it works great.

.prev a, .next a {
    background: url("sprite.png") no-repeat scroll -200px -5px transparent;
    display: inline-block;
    height: 25px;
    text-decoration: none;
    text-indent: -9999em;
 }

.prev {
  float: left; 
}

.next {
  float: right; 
}

.next a {
   background-position: -200px -18px; 
}

Answer 1

@chapsterj; first span is an inline element so, define display:block in his css . Second there is not need for text-indent & Third you can do it without extra span tag . Do like this

<a href="#" class="next">Next Month</a>
<a href="#" class="prev">Previous Month</a>

css:

a.prev, a.next{
    background: url("sprite.png") no-repeat scroll -200px -5px transparent;
    display:block;
    height: 25px;
    text-decoration: none;
 }

.prev {
  float: left;
  padding-right:40px; 
}

.next{
   background-position: -200px -18px; 
   float: right;
   padding-left:40px;
}