Slider incompatible IE7

Bonsoir,je débute en javascript et jquery.
Je suis entrain de me faire un site portfolio.
J'ai voulu faire une gallerie avec jquery et effet de slider.
Sous firefox,c'est ok.pas de message d'erreur ou mème d'avertissement avec firebug.
Par contre sous IE7,pas de message d'erreur,mais malgré sa ,le slider ne fonctionne pas.

voici la partie html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
			<div id="galerie">
				<div class="slider">
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
				</div>
				<div class="suiv"></div>
				<div class="prec"></div>
			</div>

la partie css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#galerie
{
	position:relative;
	background:#fff;
	width:150px;
	height:370px;
	float:right;
	margin:70px 10px 0 0;
	border:2px solid #000;
	overflow:hidden;
 
}
 
.slider
{
	height:5000px;
	position:absolute;
	margin-top:20px;
}
 
img
{
	height:80px;
	width:120px;
	margin:5px 10px;
}
 
.suiv
{
	position:absolute;
	height:17px;
	width:150px;
	bottom:0;
	background:url(template/flechebas.png) no-repeat;
}
 
.suiv:hover
{
	position:absolute;
	height:17px;
	width:150px;
	bottom:0px;
	background:url(template/flechebashover.png) no-repeat;
}
 
.prec
{
	position:absolute;
	height:17px;
	width:150px;
	background:url(template/flechehaut.png) no-repeat;
}
 
.prec:hover
{
	position:absolute;
	height:17px;
	width:150px;
	background:url(template/flechehauthover.png) no-repeat;
}

et enfin la partie javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
$(document).ready(function()
{
	s= new slider("#galerie");
});
var slider = function(id)
{
	var self=this;
	this.div=$(id);
	this.slider=this.div.find(".slider");
	this.largeurCache=this.div.height();
	this.largeur=0;
	this.div.find('a').each(function()
		{
			self.largeur+=$(this).height();
			self.largeur+=parseInt($(this).css("padding-top"));
			self.largeur+=parseInt($(this).css("padding-bottom"));
			self.largeur+=parseInt($(this).css("margin-top"));
			self.largeur+=parseInt($(this).css("margin-bottom"));		
		});
 
	this.prec=this.div.find(".prec");
	this.suiv=this.div.find(".suiv")
	this.saut=this.largeurCache/2;
	this.nbEtapes=Math.ceil(this.largeur/this.saut);
	this.courant=0;
 
 
	this.suiv.mouseover(function()
		{
			if(self.courant<=self.nbEtapes)
				{
 
					self.courant++;
 
					self.slider.animate(
						{
							top:-self.courant*self.saut
 
						}
						,1000);
				}
		});
 
	this.prec.mouseover(function()
		{
			if(self.courant>0)
				{
 
					self.courant--;
 
					self.slider.animate(
						{
							top:-self.courant*self.saut
 
						}
						,1000);
				}
		});
}

mon seul probleme c'est avec IE7.
J'ai essayer avec des outils comme IETester,DebugBar.
Mais aucun ne me dit ceux qui ne va pas.

Un petit coup de pouce,please.

Bonsoir.

Code:

1
2
3
4
 
this.nbEtapes = Math.ceil(this.largeur/this.saut);
 
alert("this.saut = " + this.saut + "\nthis.nbEtapes = " + this.nbEtapes);

Le problème est que this.nbEtapes = NaN avec IE8.

[EDIT] Le problème vient d'ici :

Code:

1
2
3
4
5
6
7
8
9
10
 
            this.div.find('a').each(function(i, item){    
                if (i == 0) alert($(item).css("marginTop"));
 
                self.largeur += $(item).height();
                self.largeur += parseInt($(item).css("paddingTop"));
                self.largeur += parseInt($(item).css("paddingBottom"));
                self.largeur += parseInt($(item).css("marginTop"));
                self.largeur += parseInt($(item).css("marginBottom"));        
            });

Comme les marges (marginTop et marginBottom) ne sont pas définies dans le code, IE8 retourne la valeur "auto" ce qui provoque self.largeur = NaN.

merci,c'est operationel maintenant.
c'etait une erreur toute bête

il me reste un petit problème.
Dans IE le défilement des images ne s'arrete pas.
alors,que dans Firefox,il s'arréte trop tôt.