[resolu] PB avec CSS3 et PIE.htc

bonjour,

J'essaye en CSS3 de faire mon menu de navigation ... tout fonctionne sur IE9 et les autres navigateurs, mais pour IE8 j'utilise PIE.htc.

Voici le html en question

<div id="top-nav">
	<ul>
		<li ><a href="lien1"><img alt="" src="images/img1.jpg" width="150" height="90" /></a></li>
		<li ><a href="lien2"><img alt="" src="images/img2.jpg" width="150" height="90" /></a></li>
		<li ><a href="lien3"><img alt="" src="images/img3.jpg" width="150" height="90" /></a></li>
		<li ><a href="lien4"><img alt="" src="images/img4.jpg" width="150" height="90" /></a></li>
	</ul>
</div>

accompagné de son CSS

#top-nav ul {margin: 0px; padding: 0px;}
#top-nav ul li {float: left; border: 2px solid transparent; list-style-type: none; margin: 0px; padding: 0px;}
#top-nav ul li:hover, #top-nav ul li:focus {
	box-shadow: 0px 0px 15px #7ab4f5;
	border-radius: 10px;
	behavior: url(/PIE.htc); position: relative;
	border: 2px solid #7ab4f5;	
}

#top-nav ul li.on {
	float: left; background:#fff;
	border: 2px solid #0a78f5;
	border-radius: 10px;
	behavior: url(/PIE.htc); position: relative; 
}
#top-nav ul li.on:hover, #top-nav ul li.on:focus {
	box-shadow: 0px 0px 15px #b3d2f5;
	border-radius: 10px;
	behavior: url(/PIE.htc); position: relative; 
	border: 2px solid #0a78f5;	
}

Le content-type est OK, les effets sont correctement gérés sauf pour le survol du li ( directives CSS #top-nav ul li:hover).
J'ai essayé de rajouter un z-index ... en vain (aucun effet)

Y a til un moyen de faire fonctionner mon style CSS3 dans le cas du survol ?

Merci pour votre aide
Modifié par elekaj34 (16 Nov 2011 - 14:20)

Il me semble que tu dois placer ton "behavior: url(/PIE.htc);position:relative;" dans #top-nav ul li {}
Et uniquement là.

Merci, c'était effectivement cela