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 xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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 xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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 xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : 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
 
*
{
	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)