I've got the following code:

Code HTML:
<ul class="inbox_icons">
	<li class="delete"><a href="#">Delete</a></li>
	<li class="outmail"><a href="#">Outmail</a></li>

Code CSS:
	list-style: none;
ul.inbox_icons li{
	display: inline;
	text-indent: -999em;
ul.inbox_icons li a{
	float: left;
	display: block;
	width: 18px;
    height: 18px;
li.delete{background-image: url(../img/icons/ico_remove.png);}
li.outmail {background-image: url(../img/icons/ico_outmail.png);}
For some reason I just can't get it displaying right, I want them displayed side by side, just with the 18px by 18px icon being displayed in the text's place, but it seems it just won't work correctly, I've managed to get just about every combination but the right one; either it displays fine on different lines, or it repeats the background when it shouldn't, or it displays fine but as soon as I add the text-indent in, everything dissapears for example.

Any help would be ace, tyvm