Probleme mit offsetWidth unter Mozilla

Hallo!

Ich entwerfe gerade mit ineinander geschachtelten div-Elementen einen
horizontal scrollbaren Bereich. Dazu benötige ich die Differenz zwischen der
Breite des Containers und der Breite des Inhaltelements:

<div id="testCont" style="position: absolute; top: 0px; left: 0px; width:
50px; height: 50px; overflow: hidden; clip:rect(0px, 50px, 50px, 0px);">
<div id="test" style="position: absolute; top: 0px; left: 0px;">
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
<p>lksdgfksdjldsgjkdskjgökfdgfdskfhdslfhlkdhfkjlag </p>
</div>
</div>

Die reale Breite des Elementes "test" sollte mit offsetWidth zu bestimmen
sein. Leider funktioniert das nur mit dem IExplorer. Der Mozilla gibt immer
die Breite des Elternelementes an (hier 50px). Was muss ich beim Mozilla
beachten? Ich habe mal irgend etwas von einem zweiten Container gelesen,
weiß aber nicht mehr wo.

Vielen Dank für eure Hilfe!

Bern

Bernd Schlingenkamp wrote:

Die reale Breite des Elementes "test" sollte mit offsetWidth zu bestimmen
sein. Leider funktioniert das nur mit dem IExplorer. Der Mozilla gibt immer
die Breite des Elternelementes an (hier 50px).

Woher weißt Du, das er die Breite des Elternelements angibt? Das
Kind-Element hat in diesem Fall die gleiche Größe. Mozilla kennt
offsetWidth. Die Verwendung ist mit der im IE weitgehend identisch.
Sollte also funktionieren.

Grüße
Daniel

Hallo!

Danke für die Antwort. Jede Bemühung ist willkommen.

Woher weißt Du, das er die Breite des Elternelements angibt? Das
Kind-Element hat in diesem Fall die gleiche Größe. Mozilla kennt
offsetWidth. Die Verwendung ist mit der im IE weitgehend identisch.
Sollte also funktionieren.

Zwischen "sollte" und der Realität liegen manchmal Welten. Auch hier
"sollte" Mozilla zwar, tut es aber nicht.
Was ich mit offsetWidth abfragen will ist die reale - gerenderte - Breite
eines Elementes. Wenn ich folgendes mache funzt es:

1. Die Breite des Containers nicht vorgeben
2. Die Eigenschaft "offsetWidth" des Elementes abfragen
3. Die Breite des Containers mit JavaScript festlegen

Mozilla scheint hier einen zweiten Container zu benötigen. Wie, warum,
weshalb - muss ich noch heraus finden.

Bernd

Bernd Schlingenkamp wrote:

Was ich mit offsetWidth abfragen will ist die reale - gerenderte - Breite
eines Elementes. Wenn ich folgendes mache funzt es:

1. Die Breite des Containers nicht vorgeben
2. Die Eigenschaft "offsetWidth" des Elementes abfragen

Sorry, verstehe Dein Problem nicht. Funktioniert es nun mit offsetWidth
oder nicht? Was genau funktioniert nicht, was für Werte erhälst Du
stattdessen und was erwartest Du?
Wenn ich Dein gespostetes HTML verwende, erhalte ich via offsetWidth
korrekte Werte. Diese können aufgrund des unterschiedlichen Box-Models
aber von denen im IE abweichen.

Mozilla scheint hier einen zweiten Container zu benötigen.

Nein.

Grüße
Daniel

Hallo!

Sorry, verstehe Dein Problem nicht. Funktioniert es nun mit offsetWidth
oder nicht? Was genau funktioniert nicht, was für Werte erhälst Du
stattdessen und was erwartest Du?
Okay, mein Ziel ist es einen horizontal scrollbaren Bereich zu erhalten.

Dazu packe ich das div-Element mit dem Content in ein anderes div-Element,
dessen Größe (hier 50x50) als Fenster für den darunter liegenden Inhalt
dient. Um nun zu berechnen, um wieviel Pixel ich das div-Element mit dem
Content nach links schieben kann, benötige ich die Differenz der Breite des
Eltern-Elements (hier 50px) und der Breite des Inhalt-Elements, die sich per
offsetWidth abfragen lassen sollte. Zumindest im IExplorer erhalte ich hier
die gesamte Breite des Elementes, unabhängig von der Größe des
übergeordneten div-Elements.

Für ein Beispiel siehe mein Anfangsposting.

Wenn ich Dein gespostetes HTML verwende, erhalte ich via offsetWidth
korrekte Werte. Diese können aufgrund des unterschiedlichen Box-Models
aber von denen im IE abweichen.
Mhmm, was für Werte erhältst du denn?

Mozilla scheint hier einen zweiten Container zu benötigen.

Nein.
Bist du sicher? Woher weißt du dass? -> http://www.dyn-web.com/dhtml/scroll/

Grüße

Bernd

Daniel Kirsch wrote:

Sorry, verstehe Dein Problem nicht.

Nachdem Du die Fragen nun auch mit zusätzlichen Infos in n.p.m.dom
gestellt hast weiss ich wenigstens was Du meinst.

Wenn Du das innere Element nicht absolut positionierst, funktioniert es
auch im Mozilla.
Aber warum sagst Du nicht einfach overflow:auto?

Als Fehler von Mozilla würde ich es aber nicht bezeichnen, denn die
tatsächlich gerenderte Größe des absolut positionierten Elementes ist
genau die, die er auch ausgibt. Was er nicht anzeigt, muss er auch nicht
rendern oder berechnen.

Grüße
Daniel

Hallo Daniel!

Manchmal sieht man den Fehler nicht...und auf relative Positionierung wäre
ich wahrscheinlich auch nicht so schnell gekommen. Der Witz an der ganzen
Sache ist, dass dieses Phänomen nur offsetWidth, nicht aber offsetHeight
betrifft. Ein vertikaler Scrollmechanismus funktioniert problemlos mit
position:absolute und offsetHeight. Warum also diese Abweichung bei
offsetWidth? Naja, bleibt Mozillas Geheimnis.

Gruß
Bernd