[Resolvido] Erro com IE

To com um problema no meu menu

Dá uma olhada:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img21.imageshack.us/img21/9361/menudi.jpg&key=83f9ef95f391dcc7e8f9eb3f7d5c577914719d4c45b1b370c2f067c6e29fc743" alt="Imagem Postada" />

Esse problema ocorre no IE versões 7 e anteriores. Os icones do menu vão decaindo e de alguma forma isso influencia em outros objetos da página.

HTML:

 <div id="navegacao">
 <ul>
 <li class="home"><a href="../home/index.php">Home</a></li>
 <li class="empreendimento"><a href="../empreendimento/conceito.php">O empreendimento</a></li>
 <li class="estagio"><a href="../estagio/index.php">Estágio da obra</a></li>
 <li class="foto"><a href="../fotos/index.php">Você bem na foto</a></li>
 <li class="contato"><a href="../contato/index.php">Contato</a></li>
 </ul>
 </div>
 <!-- navegacao -->

CSS:

#geral #topo #navegacao {

	float:right;
	margin:0;
	padding:0;
	width:680px;
	height:80px;
}

#geral #topo #navegacao ul {

	padding:0;
	margin:15px 0 0;
	width:680px;
	height:75px;
}

#geral #topo #navegacao ul li {

	padding:0;
	margin:0;
}

#geral #topo #navegacao ul li.home a {

	float:left;
	padding:0;
	margin:0;
	width:84px;
	height:75px;
	background:url(../images/menu_home2.png) no-repeat;
	text-indent: -9999px;
	/*display:block;*/
}

#geral #topo #navegacao ul li.home a:hover {

	float:left;
	padding:0;
	margin:0;
	width:84px;
	height:75px;
	background:url(../images/menu_home2.png) no-repeat;
	text-indent: -9999px;
	/*display:block;*/
}

#geral #topo #navegacao ul li.home a:active {

	float:left;
	padding:0;
	margin:0;
	width:84px;
	height:75px;
	background:url(../images/menu_home2.png) no-repeat;
	text-indent: -9999px;
	/*display:block;*/
}

O CSS se como do Home se repete para as outras imagens apenas mudando os nomes.