I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions.
For the next button, I want the background image to appear to the right of the text. As for the previous button, I want the text to show on the left side of the button. This task seemed simple at first, but I've already spent 2 hours on it.
If anyone can lend a hand before I lose my mind, I would greatly appreciate it.
<span class="next">
<a href="#">Next Month</a>
August
</span>
<span class="prev">
<a href="#">Previous Month</a>
June
</span>
In my CSS, I've configured the styling for the left button and it's working perfectly:
.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;
}