Problème d'affichage d'animation sous Firefox

**hraiwen** · 07/09/2009, 11h02

bonjour,
j'ai une prob d'affichage d'animation (pas flash) sous ff mais avec ie cava
code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#slider {
    width: 767px; /* important to be same as image width */
    height: 152px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	border-top:solid 1px #C78B89;
}
#sliderContent {
    width: 767px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    /*position: relative;*/
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/8px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 767px;
    background-color: #fff;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #CC292A;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}

code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="slider">
  <ul id="sliderContent">
    <li class="sliderImage"> <a href=""><img src="img_ban/1.jpg" width="767" height="152" border="0"/></a> <span class="top"><strong>Fournisseur de pneus et accessoires</strong></span> </li>
    <li class="sliderImage"> <a href=""><img src="img_ban/2.png" border="0"/></a> <span class="top"><strong>Réparation, Montage et Equilibrage Pneus</strong><img src="img_ban/cemb1.png" /></span> </li>
    <li class="sliderImage"> <img src="img_ban/3.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
	<li class="sliderImage"> <img src="img_ban/4.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
	<li class="sliderImage"> <img src="img_ban/5.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
    <div class="clear sliderImage"></div>
  </ul>
</div>
<!-- // slider -->
</body>

l' imprimé ecrans de l'affichage
normalement l'image est affiché sur tout le cadre rouge
et merci d'avance

**Bisûnûrs** · 07/09/2009, 11h07

Quand tu utilises les positions absolues, il est déconseillé de ne pas renseigner au moins une propriété CSS de position verticale (top|bottom) et horizontale (left|right).

**hraiwen** · 07/09/2009, 11h19

j'ai essayé de supprimer tout les top et left mais tjrs meme resultat

**Bisûnûrs** · 07/09/2009, 11h20

As-tu bien compris le sens de ma phrase ?

**hraiwen** · 07/09/2009, 11h24

oui biensur
c'est comme ca le code css devient:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#slider {
    width: 767px; /* important to be same as image width */
    height: 152px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	border-top:solid 1px #C78B89;
}
#sliderContent {
    width: 767px; /* important to be same as image width or wider */
    position: absolute;
	margin-left: 0;
}
.sliderImage {
    float: left;
    /*position: relative;*/
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/8px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 767px;
    background-color: #CCC;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
     -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #CC292A;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}

**Bisûnûrs** · 07/09/2009, 11h26

C'est bien ce que je dis, tu n'as rien compris ..

Tu DOIS renseigner top ET left quand tu utilises une position absolue.

**hraiwen** · 07/09/2009, 11h39

ah oui désolé tu as raison, ok
mais le div qui contient le prob ne contient pas une position absolute
et lorsque je corrige ce que tu as dis rien ne se passe

**Macmillenium** · 07/09/2009, 11h57

hraiwen tu ne donnes pas le bon code, .sliderImage est en display:none rien n'est censé s'afficher.

**hraiwen** · 07/09/2009, 12h03

voila tout le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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=utf-8" />
 
<style type="text/css" media="screen">
#slider {
    width: 767px; /* important to be same as image width */
    height: 152px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	border-top:solid 1px #C78B89;
}
#sliderContent {
    width: 767px; /* important to be same as image width or wider */
    position: absolute;
	top:0 px;
	left:0 px;	
	margin-left: 0;
}
.sliderImage {
    float: left;
    /*position: relative;*/
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/8px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 767px;
    background-color: #CCC;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #CC292A;
    display: none;
	top:0px;
	left:0px;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>
</head>
 
<body>
<div id="slider">
  <ul id="sliderContent">
    <li class="sliderImage"> <a href=""><img src="img_ban/2.png" border="0"/></a> <span class="top"><strong>Réparation, Montage et Equilibrage Pneus</strong></span> </li>
    <li class="sliderImage"> <img src="img_ban/3.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
	<li class="sliderImage"> <img src="img_ban/4.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
	<li class="sliderImage"> <img src="img_ban/5.png" border="0" /> <span class="bottom"><strong>Gonflage à l'Azote</strong></span> </li>
    <div class="clear sliderImage"></div>
  </ul>
</div>
<!-- // slider -->
</body>
</html>

pour bien comprendre la page que j'ai imprimé c'est la page d'origine a danslaquelle j'ai fait include de cette page
voila la page du test et les images:

mais mac ca marche chez moi tres bien sous ie
et sous ff juste il ya décalage de l'image c tout

**Macmillenium** · 07/09/2009, 12h18

Enlève le display:none sur .sliderImage et fais un reset des marges appliquées par défaut sur UL :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
ul { margin:0; padding:0 }

**hraiwen** · 07/09/2009, 12h46

merci bien mac je suis très reconnaissant
le problème de décalage cava résolu

mais j'ai un autre problème l'animation sur ie est plus lente que sur ff
si vous avez testé l' exemple vous aller voir
et merci de nouveau mac

**Macmillenium** · 07/09/2009, 14h00

Le problème vient sans doute de ton JS (tu peux poser la question dans le forum jQuery)

**hraiwen** · 08/09/2009, 11h06

merci bien mac, ok je vais voir.

Problème d'affichage d'animation sous Firefox

CSS

Discussions similaires

Partager

Partager