Affichage différent sous IE, incompréhension totale !

Bonjour,

Je ne comprend pas pourquoi IE9 ( Encore lui ) ne m'affiche pas le même résultat que sous gecko ou webkit ..!
Je sais que développer sous IE est une véritable combat mais là je rend les armes ! :aie:

Voici un screenshot de ce dont je vous parle : ICI

Le code css spécifique à IE est le suivant :

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
* {
margin: 0;
padding: 0;
}
p1 {
margin: 1in;
}
.circle {
display: block;
width: 15px;
height: 15px;
background: yellow;
border-radius: 40px;
}
 
.warning {
   background:#FFA5A5;
}
.line{
    padding:0px;
	max-height : 3px;
  } 
.c1{
border-radius: 40px;
  }

Et le code javascript permettant la création des points et ligne est celui ci :

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
85
86
87
88
89
90
91
<script>
var drawHorizondalLine = function(ref,id,x1,y1,x2,y2, color,size) {
			var p = \$('#t'+ref);
			var position = p.position();
			var width=x2-x1;
			var x1=parseInt(position.left)+parseInt(x1)-size/2;
			var y1= parseInt(position.top) + parseInt(y1)-size/2;
 
 
          var posX  = x1;
          var line = \"<div id='\"+id+\"'class='line'>&nbsp;</div>\";
 
          \$('#vv'+ref).append(line);
 
 
          \$('#'+id).css({
            left: posX,
            top: y1,
            width: width,
			height: '2px',
            position:'absolute',
            backgroundColor: color
          });
 
};
var drawVerticalLine = function(ref,id,x1,y1,x2,y2, color,size) {
			var p = \$('#t'+ref);
			var position = p.position();
			var height=y2-y1;
			var x1=parseInt(position.left)+parseInt(x1)-size/2;
			var y1= parseInt(position.top) + parseInt(y1)-size/2;
 
 
          var posX  = x1;
          var line = \"<div id='\"+id+\"'class='line'>&nbsp;</div>\";
 
          \$('#vv'+ref).append(line);
 
 
          \$('#'+id).css({
            left: posX,
            top: y1,
            width: size,
			height:height,
            position:'absolute',
            backgroundColor: color
          });
 
};
var drawcircle = function(ref,id,x1,y1,size,color,j) {
			var p = \$('#t'+ref);
			var position = p.position();
			var x1=parseInt(position.left)+parseInt(x1)-parseInt(size)/2;
			var y1=parseInt(position.top) + parseInt(y1)-parseInt(size)/2;
			/*alert( 'left: ' + x1 + ', top: ' + y1 ); */
 
          var line = \"<div id='\"+id+\"'class='c1'><br>\"+j+\"</div>\";
 
          \$('#vv'+ref).append(line);
 
          \$('#'+id).css({
			left: x1,
            top: y1,
			width: size,
			height: size,
			position:'absolute',
			background: color			 
          });
 
};
var drawtext = function(ref,id,x1,y1,size,color,j) {
			var p = \$('#t'+ref);
			var position = p.position();
			var x1=parseInt(position.left)+parseInt(x1)-(j.length*3);
			var y1=parseInt(position.top) + parseInt(y1);
			/*alert( 'left: ' + x1 + ', top: ' + y1 ); */
 
          var line = \"<div id='\"+id+\"'class=''>\"+j+\"</div>\";
 
          \$('#vv'+ref).append(line);
 
          \$('#'+id).css({
			left: x1,
            top: y1,			
			position:'absolute',
			background: color			 
          });
 
};
 
</script>

Une idée, une solution , je suis preneur :)

Merci d'avance :)