Gros problème avec hack CSS

Bonjour,

C'est tout désespéré que je me réfère à vous, après mainte recherche. J'utilise un hack CSS pour le positionnement d'une image. Mon bloc d'image affiche correctement sous tous les navigateurs saufs IE. Malgré l'utilisation de hack, lorsque j'utilise des écrans à la résolution soit plus grande ou plus petite, j'ai une image(ong_docs1.png) qui qui prend différentes positions en fonction de la résolution.

Mon CODE CSS HACK IE :
@charset "utf-8";
/* CSS Document */
#prog
{
	display:block;
	background-image: url('../img/btn/categories_en.png');
	background-repeat:no-repeat;
	text-decoration:none;
	float : left;
	height:31px;
	width: 155px;
	position:relative;
	z-index: 13;
}

#novela a
{
	display:block;
	background-image: url('../img/btn/ong_novelas1.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 127px;
	float : left;
	left: -20px; 
	position:relative;
	margin-top: 5px;
}
/* #en-tete a:hover, #en-tete a:focus {background-position:0 -500px}
#en-tete a:hover span, #en-tete a:focus span {background-position:100% -500px} */
#novela a:hover, #novela a:active,#novela1
{
	display:block;
	background-image: url('../img/btn/ong_novelas2.png');
	background-repeat:no-repeat;
	height:26px;
	width: 127px;
	float : left; 
	left: -20px; 
	position:relative;
	margin-top: 5px;
}



#series a
{
	display:block;
	background-image: url('../img/btn/ong_series1.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 95px;
	float : left;
	margin-top: 5px;
	left: -24px; 
	position:relative;
}

#series a:hover, #series a:active,#series1
{
	display:block;
	background-image: url('../img/btn/ong_series2.png');
	background-repeat:no-repeat;
	height:26px;
	width: 95px;
	float : left;
	margin-top: 5px;
	left: -24px; 
	position:relative;
}



#films a
{
	display:block;
	background-image: url('../img/btn/ong_films1.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 100px;
	float : left;
	margin-top: 5px;
	left: -28px; 
	position:relative;
}

#films a:hover, #films a:active,#films1 
{
	display:block;
	background-image: url('../img/btn/ong_films2.png');
	background-repeat:no-repeat;
	height:26px;
	width: 100px;
	float : left;
	margin-top: 5px;
	left: -28px; 
	position:relative;
}



#animations a
{
	display:block;
	background-image: url('../img/btn/ong_animations1.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 123px;	
	float : left;
	left: -32px; 
	position:relative;
	margin-top: 5px;
}

#animations a:hover,#animations a:active,#animations1
{
	display:block;
	background-image: url('../img/btn/ong_animations2.png');
	background-repeat:no-repeat;
	height:26px;
	width: 123px;
	float : left;
	left: -32px; 
	position:relative;
	margin-top: 5px;
}


#docs a
{
	display:block;
	background-image: url('../img/btn/ong_docs1.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 149px;
	float:left;
	left: 866px;
	position: absolute;
	margin-top: 5px;
}

#docs a:hover, #docs a:active, #docs1
{
	display:block;
	background-image: url('../img/btn/ong_docs2.png');
	background-repeat:no-repeat;
	text-decoration:none;
	height:26px;
	width: 149px;
	float:left;
	left: 823px;
	position: absolute;
	margin-top: 5px;
}



img{
border:0;
}

Mon code HTML :
<span id="prog"> </span>
<span id="novela1"></span>
<span id="series"><a href="index.php?programmes=series"> </a></span>
<span id="films"><a href="index.php?programmes=films"> </a></span>
<span id="animations"><a href="index.php?programmes=animations"> </a></span>
<span id="docs"><a href="index.php?programmes=documentaires"> </a></span>

Il faut mentionner que les spans sont compris dans un tableau dont les dimensions sont connues.