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.

Problème d'affichage d'animation sous Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager