Positionnement relatif

Bonjour tout le monde,

Je désire faire quelque chose d'assez spécial, et qui plus est qui fonctionne sur tous les navigateurs... en gros tous les ingrédients pour que ce soit compliqué
en fait je voudrais créer un tableau dont certaines cellules contiennent des div, et comble de simplicité ces div peuvent avoir une taille supérieur à la cellule (en vertical), plus ou moins décalé vers le bas et doivent être de la même largeur que la cellule...

un schema :

+---------------+
| ma cellule 1 |
| |<---------------- ma div commence ici (par exemple)
+---------------+
| ma cellule 2 |
| |<---------------- ma div fini ici (par exemple)
+---------------+

les données connues sont : le pourcentage de décalage vertical (en fonction du haut de la cellule 1) et les hauteurs de la div et de chaque cellule (en proportion)

Je voudrais donc savoir si c'est possible, et si oui, comment m'y prendre?

pour le moment j'ai fait :

...
<td>
     <div style="position: relative; top: 60%; height:160%;">
           &nbsp
     </div>
</td>...

mais le resultat n'est pas probant (sous konqueror et IE 6 par exemple)
en fait seul mozilla 1.5 fournit un rendu convenable
Merci d'avance

bonjour,
sans tester ...
peut-etre qu'il vaut mieux donner une position:relative; au tableau et tout ses element, ce qui permet ensuite (en principe) de positionner en absolue les element contenu par rapport au tableau et non plus la page.

brievement

table,td {}
div {position: absolute;
 top 0;
left:-3px;}

positionnera le div en haut et en leger retrait a gauche de la page. et logiquement:

table,td {position:relative;}
div {position: absolute;
 top 0;
left:-3px;}

en haut a gauche et en retrait de table ....

ou bien table et td sont des betes plus difficiles a apprivoiser ?

a plus

tout d'abord, merci a gcyrillus, j'ai essayé, mais ca n'allait pas.

Ca y est, ca marche presque du moins sous les 2 navigateurs les plus utilisés, en fait il fallait donner une hauteur aux balises tr, comme ca la hauteur du div est respectée...

maintanant, il ne reste plus qu'un problème de hauteur...

en fait ca marche sous IE6 et FF1.5 maintenant, mais :
- sous FF 1.0.6 (pour mandriva), le décalage par rapport au début de la cellule ne s'affiche pas,
- sous konqueror, la div ne sort pas de la cellule et n'est pas décalée verticalement non plus.
- sous mozzila 1.7 comme pour FF1.0.6

mon code complet :

mon tableau<BR />
<table
 style="text-align: center; background-color: rgb(39, 160, 109); width: 100%;"
 border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr style="height: 10px;" onmouseover="javascript:this.style.backgroundColor='blue';"  

onmouseout="javascript:this.style.backgroundColor='rgb(39, 160, 109)';">
	<td style="width: 10%;background-color: rgb(39, 160, 109);" valign="middle">case1</td>
<td style="width: 30%;">
      <div
 style="margin-top:none; padding:none; font-size:0.7em; border: 1px solid blue; display:block; background-color:red; 

position: relative; left:0; top:30%; height: 160%; width: 100%; text-size:0.1em" > </div>
      </td>
</tr>
<tr style="height: 10px;" onmouseover="javascript:this.style.backgroundColor='blue';"  

onmouseout="javascript:this.style.backgroundColor='rgb(39, 160, 109)';">
	<td style="width: 10%;background-color: rgb(39, 160, 109);"  valign="middle">case2</td>
<td style="width: 30%;"> </td>
</tr>
 </tr>
  </tbody>
</table>

des fois ce genre de chose ca m'agace
merci d'avance pour votre aide!