JS Position mit float im IE
0 
molily
JS Position mit float im IE
Folgender Quelltext soll mir aus einer geparsten Seite den absoluten Pixelwert des inneren Elementes div#inner ermitteln. Leider erhalte ich bei einer Schachtelung von positionierten und floatenden Elementen wie im Beispiel nicht das gewünschte Ergebnis:
#########################################################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE JS Position und Float</title>
<script type="text/javascript">
function qbepGetAbsoluteXY(fp_oElem) {
var pos = {x:0,y:0};
var Elem = fp_oElem;
if (!Elem || typeof Elem.offsetParent == "undefined") return;
while (Elem && typeof Elem.offsetLeft == "number") {
pos.x += Elem.offsetLeft;
pos.y += Elem.offsetTop;
Elem = Elem.offsetParent;
}
return pos;
}
</script>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
div#null{
position:relative;
border:1px solid #FF00FF;
}
div#outer{
float:left;
width:auto;
border:1px solid #0000FF;
}
div#inner{
position:relative;
border:1px solid #00FFFF;
background:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="null">
<div id="outer">
<div id="inner">foo</div>
</div>
</div>
<script type="text/javascript">
var pos = qbepGetAbsoluteXY(document.getElementById('inner'));
alert('x:'+pos.x+' y:'+pos.y);
</script>
</body>
</html>
#################################################
Das Problem tritt nur im IE auf und nur bei bestimmten Verschachtelungen, nehme ich für div#null ODER div#inner, position:static, ist alles wieder im Reinen. Das Problem wird aber vermutlich mit dem Floatelement zusammenhängen, ohne float gibt es auch keine Probleme.
Es geht mir dabei nicht darum, wie der IE etwas darstellt, ob korrekt oder nicht ist mir erst mal egal. Ich versuche nur, im Nachhinein die Position eines Elementes zu ermitteln. So langsam gehen mir die Ideen aus, wie dem beizukommen ist.
Danke, greh
-
Hallo,
Folgender Quelltext soll mir aus einer geparsten Seite den absoluten Pixelwert des inneren Elementes div#inner ermitteln. Leider erhalte ich bei einer Schachtelung von positionierten und floatenden Elementen wie im Beispiel nicht das gewünschte Ergebnis
Verzeihung, ich verstehe dein Problem nicht. Was ist das gewünschte Ergebnis? 1/1?
Das Problem tritt nur im IE auf und nur bei bestimmten Verschachtelungen, nehme ich für div#null ODER div#inner, position:static, ist alles wieder im Reinen.
Äh? Wenn #null static bekommt, wird 1/1 ausgegeben, wenn #inner static bekommt, bleibt 2/2.
Das Problem wird aber vermutlich mit dem Floatelement zusammenhängen, ohne float gibt es auch keine Probleme.
Es geht mir dabei nicht darum, wie der IE etwas darstellt, ob korrekt oder nicht ist mir erst mal egal.
Dein konstruiertes Beispiel illustriert einen MSIE-Rendering-Bug, der sich anscheinend auf die offset-Eigenschaften niederschlägt. Inwiefern ist das jetzt ein JavaScript-Problem? Ich fürchte, den absurden Testcase wirst du nicht repariert kriegen. Auf welchen Sachverhalt in der realen Anwendung soll er hinweisen? Welchen Zweck erfüllt position:relative?
Mathias
-
Hallo,
Verzeihung, ich verstehe dein Problem nicht. Was ist das gewünschte Ergebnis? 1/1?
nun ja, beim schwarzen Element mit dem cyanfarbenen Rand würde ich mich mit x:29 y:4 anfreunden können (das ist bei mir dessen Position im IE 6)
Das Problem tritt nur im IE auf und nur bei bestimmten Verschachtelungen, nehme ich für div#null ODER div#inner, position:static, ist alles wieder im Reinen.
Äh? Wenn #null static bekommt, wird 1/1 ausgegeben, wenn #inner static bekommt, bleibt 2/2.
Es geht mir dabei nicht darum, wie der IE etwas darstellt, ob korrekt oder nicht ist mir erst mal egal.
Dein konstruiertes Beispiel illustriert einen MSIE-Rendering-Bug, der sich anscheinend auf die offset-Eigenschaften niederschlägt. Inwiefern ist das jetzt ein JavaScript-Problem? Ich fürchte, den absurden Testcase wirst du nicht repariert kriegen. Auf welchen Sachverhalt in der realen Anwendung soll er hinweisen? Welchen Zweck erfüllt position:relative?
Ich möchte von einer beliebigen Seite die Position bestimmter Elemente ermitteln. Die Anwendung in meinem Fall ist ein Redaktionssystem, die Positionsermittlung dient zum Positionieren des im Nachhinein einzufügenden Menüs zu Inhaltsbearbeitung. Ich möchte also eine beliebige Webseite im Browser möglichst originalgetreu dargestellt sehen, die aber so manipuliert ist, dass ich an mir bekannten Punkten Anfasser darüberlege. div#inner könnte so ein Träger von Inhalt sein, wenn ich deren Nullpunkt kenne, kann ich auch ein Menue dort platzieren. div#inner wäre in diesem Falle ein von mir hineingesetztes Element, alles andere innen und außen entspricht dem 'Original', also irgend einer Seite.
Da ich das Element div#inner künstlich einfüge, folglich in den Eigenschaften auch frei setzen kann, könnte ich ihm ja auch ein position:static geben. Leider verfehlt meine Positionsermittlung auch dann bei einigen Verschachtelungen (habe ich noch nicht genauer untersucht) meinen Zielort.
Wenn aber die korrekte Positionsermittlung von div#inner von außeren Elementen abhängig ist, funktioniert mein Ansatz nicht (für den IE).
Das Rendering wäre mir eigentlich egal, ich brauche ja nur von der gerenderten Seite die Position eines Elementes. Aber es ist zu befürchten, dass das Problem in den Untiefen vom IE schlummert und nicht ohne weiteres zu Umsteuern ist.
Danke der Mühe, greh
-