Sprite

[Shikamaru93]

Per ottimizzare la velocità di caricamento del mio sito ho voluto provare ad utilizzare il css spirite ma ho problemi col codice.
Ho guardato su google, compresi i siti che generano automaticamente il codice con l'immagine base ma non riesco a venirne a capo.
Ho questa immagine
http://www.fullmetalpanic-italy.com/img/spoiler.png
e con il codice ho bisogno dei tre pallini separati in base a quello che mi serve. Per farlo ho utilizzato questo codice tre volte, uno per pallino:

.spoiler_1 {
	background-repeat:no-repeat;
	background-image: url(../img/spoiler.png);
	height:7px;width:7px;
	background-position: -0px -0px;
	padding-left:10px;
	display:block;
 }

richiamato dalla riga html
<td class="spoiler_1">
In effetti funziona, cioè, cambia il colore in base alla classe però mi ridimensiona la larghezza della riga causando la sovrapposizione dei link del menù invece di tenere la larghezza normale al 100% come specificato all'inizio nel table.
Qual'è il problema e come lo risolvo?

[ResianTaxidrive]

Lo risolvi molto probabilmente togliendo la tabella e mettendo un div dove deve andare il pallino.

Penso tu intenda SPRITE e non SPIRITE, fa molto fantasmatico.

[Shikamaru93]

Ho sbagliato XD
Ho provato così:

<div>
<ul style="width: 100%">
<li class="spoiler_1">Full Metal Panic
<li class="spoiler_2">Full Metal Panic[/list]</div>

ma il problema resta.
Se nel li ci aggiungessi anche un style="width: mi si vedrebbe l'immaginetta dei tre pallini in base a quello scelto.

[ResianTaxidrive]

Si può vedere la pagina in questione?