Image / PNG / Filter / Lien /

Bonjour à tous,
voilà mon problème :
Pour mon design j'ai été obligé d'utiliser des PNG.
Qui dit PNG dit problème sur IE6.
J'ai utilisé la proprieté filter...

Le problème que j'ai rencontré : mon menu est une liste constitué d'image (texte avec fond transparent).
Le lien fonctionne sur le texte mais pas sur le fond transparent

J'utilise ce menu :http://devthought.com/cssjavascript-true-power-fancy-menu/

Extrait de code :
Menu

		<div id="menu">
			<ul>
			   <li class='current' id="menu_accueil"><a href="#">Accueil</a></li>
			   <li id="menu_competences"><a href="#">Compétences</a></li>
			   <li id="menu_realisations"><a href="#">Réalisations</a></li>
			   <li id="menu_contact"><a href="#">Contact</a></li>
			</ul>
		</div>

CSS autre que IE 6

#menu {
	position:absolute;
	top:90px;
	left:500px;
	display:inline;
	width:400px;
	

}


#menu ul {
	padding: 0;
	margin: 0;
}


#menu ul li {
	float: left;
	list-style: none;
	
}

#menu ul li a  {
	text-indent: -500em;
	z-index: 10;
	display: block;
	float: left;
	height: 30px;
	position: relative;
	overflow: hidden;
}



#menu_accueil a {
	width: 75px;
	background: url('img/menu_accueil.png') no-repeat center;

}

#menu_competences a {
	width: 120px;
	background: url('img/menu_competences.png') no-repeat center;
}

#menu_realisations a {
	width: 115px;
	background: url('img/menu_realisations.png') no-repeat center;
}

#menu_contact a {
	width: 78px;
	background: url('img/menu_contact.png') no-repeat center;
}



#menu li.background {
	background: url('img/bg_menu_right.gif') no-repeat top right ;
	z-index: 8;
	position: absolute;
	visibility: hidden;
}

#menu .background .left {

	background: url('img/bg_menu.gif') no-repeat top left;
	height: 30px;
	margin-right: 9px; /* 7px is the width of the rounded shape */
	}

CSS pour IE 6

#menu_accueil  a {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/menu_accueil.png");
	
}

#menu_competences a {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/menu_competences.png" );

	
	
}

#menu_realisations a {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/menu_realisations.png");
	margin-top:4px;
	
}

#menu_contact a {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/menu_contact.png");
	margin-top:4px;
	
}

Quelqu'un a une idée ?

CraZy a écrit :
Quelqu'un a une idée ?

Oui, utiliser les PNG-8 qui eux ne posent aucun problème à IE6 si on souhaite conserver les dégradés de transparence dans tous les navigateurs mais qu'on peut se contenter dans IE6 de la transparence "à la GIF". Aucun hack nécessaire.
pngnq ou Fireworks ne réduisent pas à la perfection toutes les images en 256 couleurs mais si tes textes ne sont pas super compliqués, tu n'y verras que du feu (et en plus c'est beaucoup plus léger)
Modifié par Felipe (08 Apr 2008 - 19:57)

J'ai bien essayé de mettre mes images textes en gif, mais ya un contour crade qui se rajoute à chaque fois....

En plus mon texte sur l'image est tout simplement blanc... rien de bien spécial.... mais ca veut pas
Modifié par CraZy (08 Apr 2008 - 20:15)