Décalage list-bullet selon résolution

Bonjour,
Comme précisé dans le sujet, j'ai crée une liste tout bête de trois élément ayant chacun 1 background-image différent.
Ce que je ne comprends c'est que selon la résolution de ma page qui est la base réalisé en 1280*1024, ces bullets ne "suivent" pas le texte.
J'ai essayé de jouer avec les backround-attachment, background-position, etc. mais tous mes essais se couronnent brillamment par .. hum ... un échec puisant.

Si quelqu'un a la gentillesse de pencher son œil, voire les deux, sur ces bouts de codes je lui en serai très reconnaissant, tout aussi futile soit certainement mon erreur:

CSS:

.contact {
  list-style-type: none;
  padding: 2px 0 0 0;
  margin: 0;
  color: #FF9200;
}

li.email {
	background-image: url(../_img/contact_email.png);
	background-repeat: no-repeat;
	background-position: 63%;
	padding: 1px 0 1px 0;
}

li.home {
	background-image: url(../_img/contact_home.png);
	background-repeat: no-repeat;
	background-position: 52.3%;
	padding: 1px 0 1px 0;
}

li.phone {
	background-image: url(../_img/contact_phone.png);
	background-repeat: no-repeat;
	background-position: 84%;
	padding: 1px 0 1px 0; 
}

HTML:

<ul class="contact">

		<li class="email"> <a href="mailto:mail"><span>NOSPAM</span>mail</a> <span><i>(erase the NOSPAM)</i></span></li>
		<li class="home"> adresse</li>
		<li class="phone"> numéro</li>
	</ul>

Merci d'avance.

ps: je sais que l'affichage IE6 n'est pas encore bon mais chaque chose en son temps ;)