[javascript] Problème de déplacement de <p> sous IE9

Bonsoir, alors comme le titre est pas vraiment explicite je vais vous expliquer mon cas.

J'ai réalisé un texte déroulant afin de faire défiler de bas en haut un texte dans un div.
Donc en gros j'ai crée un div qui contient une balise <p>

<div>
	<p id="listeE">
		<i>Publié le : 18/07/12</i> - Contrat : (type)<br /> <b><a href="">Contrat Apprentissage en couverture charpente</a></b><br />
		<i>Publié le : 18/07/12</i> - Contrat : (type)<br /> <b><a href="">Assitant Web Service internet</a></b><br />
		<i>Publié le : 18/07/12</i> - Contrat : (type)<br /> <b><a href="">Technicien Multimédia et informatique</a></b><br />
		<i>Publié le : 18/07/12</i> - Contrat : (type)<br /> <b><a href=""> Agent de soutien des systèmes d'information et de communication</a></b><br />
		<i>Publié le : 18/07/12</i> - Contrat : (type)<br /> <b><a href=""> Technicien informatique</a></b><br />
	</p>
</div>

j'ai en css bloquer le flux en hidden ainsi on ne voit pas mon p sortir de mon div. et j'ai décalé le p vers le bas pour que l'animation ne se fasse pas totalement en position top=0 ni totalement en bas.

div{
	text-align:center;
	overflow:hidden;
}
#listeE{
	position:relative;
	top:40px;
}

Et j'anime le tout via mon javascript en déplaçant de bas en haut. Alors l'animation fonctionne sous google chrome, firefox, safari, ie8 mais sous ie9 elle fonctionne au départ mais une fois que mon p arrive à top=-1px et bien sa reste telle qu'elle... je ne comprend pas comment cela peut-il rester bloquer à ce niveau. J'ai placé des alert pour voir les valeur (ce que au vue du set interval IE9 n'aime pas x)

Mais tout ce que j'ai pu constaté c'est que cela reste bloquer sans que je puisse comprendre le pourquoi du comment...

$(document).ready(function(){	

	if(navigator.appName!='Microsoft Internet Explorer')/*pour ie8*/
	{	
		intervalOffre = setInterval(animationOffre,125,"#listeE");
	}else	{
		intervalOffre = setInterval('animationOffre("#listeE")',125);	}
	$("#emploi").hover(
		function (){
			window.clearInterval(intervalOffre);
		},
		function (){
		
			if(navigator.appName!='Microsoft Internet Explorer')
			{	
				intervalOffre = setInterval(animationOffre,125,"#listeE");
			}else	{
				intervalOffre = setInterval('animationOffre("#listeE")',125);
			}
			
		}
	);
});
function animationOffre(id){
	var height= parseInt(supprimeChaine($(id).css('height'),'px'))+10;
	var top = parseInt(supprimeChaine($(id).css('top'),'px'));
	if(top<=-1*height){
		top =height-90 ;
	}
	top=top-1;
	$(id).css('top',top+'px');

}

Alors voilà je voudrais savoir si vous pouviez m'aider à résoudre ce mystère. Sachez que quand je met IE9 en affichage de compatibilité IE8 cela marche très bien aussi... Le soucis viendrais de l'interprétation de mon code via IE9 mais ou et pourquoi ? je ne le sais pas j'ai vraiment besoin de votre aide car je ne comprend pas.

Merci beaucoup de votre aide.
Modifié par Bloodymeister (28 Aug 2012 - 23:03)

Personne ne peut m'aider ?...

Salut,

Je t'invite à te plonger plus en avant dans jQuery...

Au vu de ton code, tu devrais trouver ton bonheur avec .animate(), .height(), .offset() ou .position()

tm

Merci, au moins un endroit ou creuser. Merci je vais tenter de tout implémenter via Jquery.