Bonjour à tous

Je crois que le titre en dit déjà beaucoup...
Ce que je cherche à faire c'est qu'un DIV ait se placer parfaitement par-dessus (le TR) et ce en ajustant sa taille. Les bordures du DIV ne doivent pas dépasser du TR mais peuvent seulement empiéter vers l'intérieur.

Alors voilà ce que j'ai :
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
82
83
84
85
86
87
88
<script>
// Class permettant de récupérer la position d'un objet
function GetObjectPosition( obj ) {
    this.Left = 0 ; this.Top = 0;
    if (obj) {
        var objTemp = obj.offsetParent;
        this.Left = obj.offsetLeft;
        this.Top = obj.offsetTop;
        while (objTemp) {
            this.Left = this.Left + objTemp.offsetLeft;
            this.Top = this.Top + objTemp.offsetTop;
            objTemp = objTemp.offsetParent;
        }
     }
     return this;
}

// Classe permettant de récupérer la taille d'un object
function GetObjectSize( obj ) {
     this.Width = 0; this.Height = 0;
     if (obj) {
         if (obj.offsetWidth != null) {
             this.Width = obj.offsetWidth;
             this.Height = obj.offsetHeight;
         }
     }
     return this;
}

// Class permettant de déplacer et redimensionner un object
function MoveAndSizeObject(objRef, left, top, width, height) {
    objRef.style.left = left;
    objRef.style.top = top;
    objRef.style.width = width;
    objRef.style.height = height;
}

// Lors du chargement du document
function OnDocuemntLoad() {
   var tableMatrixTR = document.getElementById( "TestTR" );
   var tableMatrixTRDivPosition = new GetObjectPosition( tableMatrixTR );
   var tableMatrixTRDivSize = new GetObjectSize( tableMatrixTR );
	    
   var testDiv = document.getElementById( "TestDIV" );
   MoveAndSizeObject( testDiv, 
                      tableMatrixTRDivPosition.Left, 
                      tableMatrixTRDivPosition.Top, 
                      tableMatrixTRDivSize.Width, 
                      tableMatrixTRDivSize.Height );
   testDiv.style.visibility = "visible";
}
</script>

<style>
table.TableElem {
	border-width: 1px;
	border-spacing: 0px;
	border-style: groove;
	border-color: gray;
	border-collapse: separate;
	background-color: #fffafa;
}
td.CellElem {
	width :80px;
	height :80px;
	border-width: 1px;
	border-style :dotted ;
	border-color: black;
	cursor :default;
}
</style>			

<body onload="return OnDocuemntLoad();">
<div id="TestDIV" style="z-Index :10000; position :absolute; visibility :hidden; border :10px solid red;"></div>
<table class="TableElem">
  <tr id="TestTR">
    <td class="CellElem">01</td>
    <td class="CellElem">02</td>
    <td class="CellElem">03</td>
  </tr>
  <tr id="TestTR2">
    <td class="CellElem">04</td>
    <td class="CellElem">05</td>
    <td class="CellElem">06</td>
  </tr>
</table>
</body>
Remarquez que le DIV sous IE n'est pas parfaitement juxtaposé au-dessus du TR, et que sur FirexFox c'est encore pire.

Quelqu'un pourrait me donner un coup de main ?
Merci