[MooTools] Fx.Styles IE

Fx.Styles IE

Bonjour,

voilà j'utilise la librairie mootools pour mon menu, et faire un effet "smooth" à l'aide de Fx.Styles.

Alors après un bon nombre de soucis, tout marchait impeccable sous Mozilla firefox. Et là c'est le drame, je m'aperçois que mon menu ne marche plus sous IE (7) ! Donc je vais voir la démo sur le site officiel mootools voir si c'était bien compatible, et oui.
Donc le problème vient bien de moi.

IE signale donc un problème (une erreur existe sur la page, logo jaune en bas à gauche).

Je ne vois vraiment pas ce qui cloche, je laisse le code de ma page principale, ainsi que mon fichier load.js qui contient la fonction pour le menu. Je dispense le fichier mootools.js qui est énorme. Voici le lien si vous voulez le CSS ou autre, mais je doute que ça vienne de là (mais bien du côté javascript):
http://lemoineaudamien.free.fr/galeries-dach/

index.php :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeries Dach</title>
<link rel="stylesheet" type="text/css" media="all" href="fichiers/style/style.css" />
<script type="text/javascript" src="fichiers/js/mootools.js"></script>
<script type="text/javascript" src="fichiers/js/load.js"></script>
<!--[if gte IE 5]>
<style>
@import url("fichiers/style/ie.css"); 
</style>
<![endif]-->
</head>
 
<body>
<div id="conteneur">
  <div id="titre"><img src="images/dach-titre.png" width="253" height="75" alt="Galeries Dach" /></div>
 
  <div id="galerie">
    <div id="conteneurmenu">
 
<!-- Affichage du menu dynamique !-->	
<ul id="ssmenu">
  <li><div onclick="javascript:location.href='index.php?rub=10';">Mayotte</div></li>
  <li><div onclick="javascript:location.href='index.php?rub=4';">Citroën C3 HDI Pulp</div></li>
  <li><div onclick="javascript:location.href='index.php?rub=3';">Linux bureau 3D</div></li>
  <li><div onclick="javascript:location.href='index.php?rub=2';">Maison de Capbreton</div></li>
 
  <li><div onclick="javascript:location.href='index.php?rub=1';">Pussy cat</div></li>
</ul>
<!-- Fin affichage du menu !-->
 
	  <div style="padding-top:10px;">
	    <p><img src="images/photo_moment.jpg" width="200" height="171" border="0" alt="Fleurs Capbreton" /><br />
	          <span class="grisClair onze" style="margin-left:10px;">Fleurs by <a href="mailto:juli1_h@hotmail.fr" class="grisClair link onze">Julien</a>.</span></p>
	  </div>
 
	  <div id="logosValid"></div>
	</div>
	<div id="vignettes">
 
<div style="text-align:right;padding-bottom:25px;padding-right:5px;height:20px;" class="quinze grisFonce">Mayotte, 2007</div>
<!-- Affichage des vignettes !-->
<div class="thumb">
  <a href="index.php?rub=10&amp;img=1"><img src="images/galeries/mayotte/thumb/dsc00862.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
  <a href="index.php?rub=10&amp;img=2"><img src="images/galeries/mayotte/thumb/dsc00883.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
 
...
 
<div class="thumb">
  <a href="index.php?rub=10&amp;img=7"><img src="images/galeries/mayotte/thumb/p1000420.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
  <a href="index.php?rub=10&amp;img=8"><img src="images/galeries/mayotte/thumb/p1000449.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
  <a href="index.php?rub=10&amp;img=9"><img src="images/galeries/mayotte/thumb/p1000451.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<div class="thumb">
  <a href="index.php?rub=10&amp;img=10"><img src="images/galeries/mayotte/thumb/p1000884.jpg" height="56" border="0" style="margin-top:5px; max-height:56px; max-width:76px;" alt="" /></a>
</div>
<!-- Fin affichage des vignettes !-->
 
	</div>
  </div>
</div>
<div id="footer">
 
  <div id="bandeaubas" class="onze grisClair">
    <div style="float:left;">
	  <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="images/xhtml.gif" alt="xhtml" height="15" width="80" border="0" /></a> 
	  <a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="images/css.gif" alt="css" height="15" width="80" border="0" /></a> 
	  <a href="http://www.mozilla-europe.org/fr/products/firefox/" target="_blank"><img src="images/getfirefox.gif" alt="firefox" border="0" /></a>	</div>
	<div style="float:right;">
	Powered by <a href="http://www.dach-production.com/" target="_blank" class="onze grisClair link">Dach-Production</a>
	</div>
 
  </div>
</div>
</body>
</html>

load.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function(){
	// liste du menu
	var list = $$('#ssmenu li div');
	list.each(function(element) {
		var fx = new Fx.Styles(element, {duration:200, wait:false});
		element.addEvent('mouseenter', function(){
			fx.start({
				'padding-left': 5,
				'background-color': '#F5F5F5',
				'color': '#333333',
			});
		});
 
		element.addEvent('mouseleave', function(){
			fx.start({
				'padding-left': 0,
				'background-color': '#FFFFFF',
				'color': '#666666',
			});
		});
 
	});
};

Merci d'avance !

salut,

• pour ton erreur sous IE, remplace ceci :

Code:

1
2
3
4
5
<!--[if gte IE 5]>
<style>
@import url("fichiers/style/ie.css"); 
</style>
<![endif]-->

par

Code:

1
2
3
<!--[if IE]>
  <link rel="stylesheet" href="fichiers/style/ie.css" type="text/css" media="all" />
  <![endif]-->

• pour ton probleme avec mootools, dans ton fichier load.js, tu as mis une virgule de trop apres ta définition color...
voici le code corrigé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function(){
	// liste du menu
	var list = $$('#ssmenu li div');
	list.each(function(element) {
		var fx = new Fx.Styles(element, {duration:200, wait:false});
		element.addEvent('mouseenter', function(){
			fx.start({
				'padding-left': 5,
				'background-color': '#F5F5F5',
				'color': '#333333'
			});
		});
 
		element.addEvent('mouseleave', function(){
			fx.start({
				'padding-left': 0,
				'background-color': '#FFFFFF',
				'color': '#666666'
			});
		});
 
	});
};

Merci beaucoup !

Je vais tester ça ce midi en rentrant chez moi et je te tiens au courant !

Bon, ça marche impec !

Il me reste encore un petit problème de CSS spécial IE, mais bon au pire c'est pas très grave (padding plus grand en bas de la photo une fois agrabdie...)

Merci beaucoup pour ton aide !
A+