[IE] bug div qui suit curseur
Bonjour
J'ai un problème avec IE (testé sous 7 et 8bêta) mais pas avec firefox (rien d'étonnant...), mais il faudrait que ca marche sous IE aussi
exemple grandeur nature : http://91.121.135.179/iut/
code css entier : http://91.121.135.179/iut/style.css
Donc le bug survient lorsqu'on déplace un "évenement" (drag n drop), le bloc div est censé suivre le curseur, sous firefox pas de problème, mais sous IE la div reste bloquée en haut de la page comme si y'avait un mur l'empechant de passer
voilà le morceau de page correspondant :
Code:
1
2
3
4
5
6
7
8
|
<div class="frame_principale">
<!-- [...] -->
<div id="temp"></div>
<div id="planning">
<!-- [...] -->
</div>
</div> |
div id="temp" est une div temporaire où je met ma div qui suit le curseur, le temps de déplacement de la div (je l'utilise car sinon ca fait un bug d'affichage sous firefox et sous ie).
A noter que le drag n drop marche sous IE, c'est juste que la div ne suit pas correctement le curseur, car sinon la div se pose bien là où on veut.
dans div id planning, j'ai des lignes d'evenement de ce type :
Code:
1
2
3
4
5
6
7
|
<div class="item" id="cam_1" onMouseUp="onMouseUpSurEvenements(this)">
<div class="nom">CAMION 1</div>
<div class="evenements">
<!-- [...] -->
</div>
</div> |
et c'est donc dans div class="evenements" qu'il y a les événements déplacables sous cette forme :
Code:
1
2
|
<div class="evenement" id="1" style="margin-left: 611px; width: 413px;" onmousedown="bougerEvenement(this)">livraison R4E4</div> |
et voilà le code CSS associé au partie donnée ci dessus :
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
|
*
{
margin : 0px;
padding :0px;
}
.frame_principale
{
background-color : pink;
width:100%;
height:100%;
margin : 0;
display:block;
}
/*** Planning ***/
#planning
{
width:99.9%;
z-index:0;
position:relative;
display:block;
overflow : auto;
height : 90%;
}
.item
{
position : relative;
display:block;
margin-bottom:1px;
height:40px;
width:99.9%;
z-index:0;
}
.nom
{
background-color:#5588FF;
color:white;
display:block;
width:199px;
position:absolute;
height:40px;
z-index:0;
}
.evenements /* tous les évenements */
{
background-color:#AAAAFF;
color:white;
left:200px;
position:absolute;
display:block;
width:100%;
height:40px;
z-index:0;
}
.evenement /*un evenement */
{
position : absolute;
z-index:2;
height:40px;
background-color:#1188FF;
opacity:0.7;
} |
chaque évenement est affiché via javascript, mais je ne pense pas que le javascript soit en cause ici. (au pire si ca vous amuse vous pouvez regarder les fichiers JS XD)
