Ich habe Textbuttons die ich per CSS ansprechend gestaltet habe, nur leider kann ich Dort keine Icons mit aufnehmen, sonst sehen die Buttons zerstückelt aus. Ich kapiere einfach nicht warum. Mit Text geht es doch wunderbar.

  
        <div id="EditContent" >  
            <a href="#" style="margin-left:130px;"><span class="ui-icon ui-icon-triangle-1-n"></span>Gross</a>  
        </div>  

  
  
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }  
.ui-icon-triangle-1-n { background-position: 0 -16px; }  
  
div#EditContent {  
	float: left;  
	margin-right: 10px;  
	font-size: 0.8em;  
	font-family: Arial, Helvetica, sans-serif;  
	font-weight: normal;  
	text-transform: uppercase;  
	  
}  
  
div#EditContent a {  
	padding: 3px 8px 3px 8px;  
	background: url(../css/fantasy-theme/images/ui-bg_highlight-soft_25_2f3865_1x100.png) 50% 50% repeat-x;  
	background-color: #4A4A6F;  
	color: #fff;  
	border: solid 1px #6A6A8F;  
	-moz-border-radius: 2px; -webkit-border-radius: 2px;  
}  
  
div#EditContent a:hover {  
	background: url(../css/fantasy-theme/images/ui-bg_highlight-soft_60_3f487d_1x100.png) 50% 50% repeat-x;  
	border: 1px solid #8d95cc;  
	background-color: #FFCC00;  
	color: #000;  
	}  

Ohne das UI-Icon gehts... Was kann das sein?