offsetTop e IE7

[codesurfer]

Ciao a tutti,
ho un problemino con un menù a tendina in JS.
In pratica all'onOver sul testo indicato in Firefox mi apre i menu allineati in modo corretto mentre in IE me li apre in 0,0.
Debuggando si vede che le proprietà offsetTop e offsetLeft da IE non vengono riconosciute in modo corretto.
Il codice è il seguente:

var box2 = document.getElementById(nodes[i].id);

box2.style.left = box1.offsetLeft + self.position.level1.left + "px";

Soluzioni??

Grazie

[Xinod]

se vuoi trattare gli offset in maniera consistente trai vari browser devi considerarli come coordinate assolute, sommando gli offset fino al topmost element

	function getCoords(el){
		var c={x: 0, y: 0};
		while (el) {
			c.x+=el.offsetLeft;
			c.y+=el.offsetTop;
			el=el.offsetParent;
		}
		return c;
	};

var ccBox1=getCoords(document.getElementById('Box1'));

troverai il suo left assoluto in ccBox1.x

ciao

[codesurfer]

niente da fare, sempre la stessa situazione.
IE mi torna solo valori -1 e 0 mentre firefox torna i valori corretti...maledetto browser retrogrado...

[Xinod]

fai vedere lo script in azione
cosi' escludiamo qualsiasi altra possibilita'

[codesurfer]

questo è lo script http://javascript.html.it/script/ved...t-orizzontale/ (non ti linko tutto il codice perchè è lunghetto. il pezzo di funzione in questione è questo:

[...
// position
var box1 = document.getElementById(id + "-" + (tree.length - 1));
var box2 = document.getElementById(nodes[i].id);

var el = new Element(box1.id);
if (1 == el.level) {
if ("horizontal" == self.type) {
box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.level1.top + "px";
if (self.browser.ie7) {
box2.style.left = self.position.level1.left + "px";
} else {
box2.style.left = box1.offsetLeft + self.position.level1.left + "px";
}
} else if ("vertical" == self.type) {
box2.style.top = box1.offsetTop + self.position.level1.top + "px";
if (self.browser.ie7) {
box2.style.left = box1.offsetWidth + self.position.level1.left + "px";
} else {
box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.level1.left + "px";
}
}
} else {
box2.style.top = box1.offsetTop + self.position.levelX.top + "px";
box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.levelX.left + "px";
}
...]

richiamato da php in questo modo:

[...
<div class="section">
BU System Management[img]img/arrowSml.gif[/img]
<div class="section">
IT Security
Data Protection
Infrastruttura accesso
Network & System Monitoring
Messaging & Collaboration
Identity Management
System Protection
<font class="item2">-------------------------------</font>
[b]Open Technologies[b][img]img/arrowSml.gif[/img]
<div class="section">
ISyC
ISeC
IAS
</div>
</div>
</div>
...]

l'esempio che trovi al link sopra mi va anche in IE.

[Xinod]

questo particolare menu' a me non piace, per varie ragioni

prima di tutto potresti ottenere lo stesso tipo di menu' con l' uso dei soli css
(ne trovi di praticamente identici in http://www.cssplay.co.uk/menus/ )
o con molto meno javascript
http://htmldog.com/articles/suckerfish/dropdowns/
e in entrambi i casi con un approccio al markup semanticamente piu' corretto

se servono nel menu', o altrove in tutto il sito, effetti vari ti tornerebbe comodo usare una librieria come jquery,
che ha plugin per ottenere menu' del genere, ancora basati su suckerfish
http://users.tpg.com.au/j_birch/plugins/superfish/

infine, se dici che l' esempio funziona sui 2 browser e il tuo no,
come speri si possa capire perche' nella tua versione non funziona senza vederla?!