Image background padding problem.

Hello everybody. Please help me with my problem.

my .css code:

/*BackLink+NextLink*/
a.backlink {
    text-decoration:none;
    background:url(aarrowleft.gif) transparent center right no-repeat;
    border:none;
    }
a.nextlink {
    text-decoration:none;
    background:url(aarrowright.gif) transparent center right no-repeat;
    border:none;
    }

HTML:

html code:

<span class="float-left"><a href="design_colorgraphics.html" class="backlink" style="padding:0 0 0 0;">Previous: Category</a>&nbsp;<img align="absmiddle" src="images/anibul17.gif" />&nbsp;<a href="design_colorgraphics.html" class="nextlink" style="padding:0 20px 0 0;">Next: Design Color </a></span>
				  <span class="float-right"><a class="above" href="#top">Back to top</a></span>

HTML:

Sample output is here: http://vickriz.com/images/bottomnav.jpg
The main problem is that, I can't move the left arrow red button at the front of the text "Previous:.." How can I do this?

 

Change the "right" in .backlink to "left". Also, you'll want to add padding-left to make sure the text doesn't fall over the image.