offsetTop sous IE7

Salut

J'essaye d'intégrer un calendrier dans mon formulaire. J'ai récupéré un script tout fait sur le net.
Il y a donc un tableau qui s'affiche sous l'élément du formulaire de type text.

Ce tableau se positionne bien sous IE6 et FF mais pas sous IE7 au niveau du la propriété "top" : http://www.magnificat.com/magnificat...romouvoir2.asp

C'est cette fonction qui détermine la position que doit prendre le tableau au niveau de la hauteur :

Code:

---

1 2 3 4 5 6 7 8 9

function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; }

---

D'après ce que j'ai pu lire sur le net et le forum ca me semble pourtant bon :?

Une idée de ce que je pourrais faire ?

Merci

bonjour,

place le tableau qui contient le calendrier dans un div avec le style position: absolute. Ce div place le dans le même td que l'input qui contient ton champ date :

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

<form> <table border="1" style="position: absolute; top: 100px; left: 100px"> <tr> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td> <input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text">   <div style="position: absolute"> <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"> <tr><td id="ds_calclass"> </td></tr> </table> </div>   </td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> <td style="width:20px">&nbsp;</td> </tr> </table>   <div> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>   </form>

---

et place en commentaire le code

Code:

---

1 2 3 4 5 6 7

// Move the calendar container! /*the_left = ds_getleft(t); the_top = ds_gettop(t) + t.offsetHeight;     document.getElementById('ds_conclass').style.left = the_left + 'px'; document.getElementById('ds_conclass').style.top = the_top + 'px';*/

---

contenu dans la fonction ds_sh().

Il y aura une légère différence de présentation sous IE et Firefox :
avec IE le calendrier sera à droite de l'input, avec Firefox la calendrier sera sous l'input.

[edit]j'ai un souci avec la feuille de style sous Firefox :oops: [/edit]

Petite correction Oluha.

Citation:

---

[edit]j'ai un souci avec la feuille de style sous Firefox [/edit]

---

Le problème vient du div qui encadre le tableau du calendrier (cf. code HTML que j'ai fourni). Enlève le div, tout simplement :

Code:

---

1 2 3 4 5 6 7 8 9 10

<td> <input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text">   <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"> <tr><td id="ds_calclass"> </td></tr> </table>   </td>

---

Quant à ta feuille de style, ne la modifie pas, le tableau est déjà en position absolute (ne précise ni le top ni le left) ;)
Et mets bien en commentaire (ou supprime la) la partie javascript que j'ai donnée dans mon message précédent.

Merci !

Pour que le calendrier se place sous l'input dans IE il suffit de rajouter un <br> :

Code:

---

1 2 3 4 5 6

<td><input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text"><br> <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"> <tr><td id="ds_calclass"> </td></tr> </table> </td>

---

Par contre le positionnement merde sous Netscape 7.1 :mur:
Sous Opéra ca me semble OK.
Si quelqu'un a d'autres navigateurs sous Mac ou Linux ca serait sympa de me dire si le calendrier se positionne correctement ;)

dans la fonction function ds_sh()
Si tu remplaçais :

Code:

---

1 2 3

// To change the position properly, we must show it first. document.getElementById('ds_conclass').style.display = '';

---

par

Code:

---

1 2 3

// To change the position properly, we must show it first. document.getElementById('ds_conclass').style.display = 'block';

---

:question:

Sinon que se passe-t-il sous Netscape ?

Ah oui là ca fonctionne !
Le pire c'est que j'avais vu cette erreur au niveau du display mais j'avais oublié de la corriger :lol:

Merci beaucoup pour ton aide ;)

Citation:

---

Envoyé par Oluha

Ah oui là ca fonctionne !
Le pire c'est que j'avais vu cette erreur au niveau du display mais j'avais oublié de la corriger :lol:

Merci beaucoup pour ton aide ;)

---

de rien ;)