Dynamische Inhalte - Fehler bei Layoutberechnung

Hallo,

ich ändere Inhalte der Seite dynamisch unter Verwendung von innerHTML.
Da ein Beispiel mehr sagt als 1000 Worte:
http://boardtest.pytalhost.com/test.html

Das funktioniert in Opera 8+ und Firefox 2 wunderbar: Nach der Änderung wird
der Container größer und das Element 'overlay' wandert entsprechend nach
unten.
In IE 6/7 und Mozilla 1.7 wird zwar der Container größer, aber 'overlay'
nicht neu positioniert.
Was kann ich tun, um das Problem zu beheben?

--
Wolfgang Fellger

Wolfgang Fellger schrieb:

http://boardtest.pytalhost.com/test.html

#overlay {
position:absolute;

Ist das wirklich falsch, wenn es NICHT nach unten wandert?

Bin nicht so der CSS-Profi, aber genau deshalb erwarte ich von einer
absoluten Positionierung eben genau das von dir als fehlerhaft
beschrieben Verhalten.


Peter

Peter Schleif schrieb:

Bin nicht so der CSS-Profi, aber genau deshalb erwarte ich von einer
absoluten Positionierung eben genau das von dir als fehlerhaft beschrieben
Verhalten.

Nein, absolute Positionierung gilt relativ zum nächsthöheren Element mit
position:absolute, position:relative oder position:fixed.
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position>
D.h. in diesem Beispiel muss das rote Kästchen *immer* an der schwarzen Linie
kleben.

Wenn man 'test' statisch mit Inhalten füllt, funktioniert das auch mit allen
genannten Browsern. Es macht also einen Unterschied, ob ich die Daten ins
Dokument schreibe oder per JS dynamisch setze => Bug.

--
Wolfgang Fellger

Wenn man 'test' statisch mit Inhalten füllt, funktioniert das auch mit allen
genannten Browsern. Es macht also einen Unterschied, ob ich die Daten ins
Dokument schreibe oder per JS dynamisch setze => Bug.

benutze doch testweise mal die appendchild methode des übergeordnetetn
elements oder schau dir diesen alistapart artikel über importNode() an

http://www.alistapart.com/articles/c...owserscripting

vor allem die stelle wo
[HTMLelement].innerHTML = [HTMLelement].innerHTML gesetzt wird dürfte
dich interessieren, auch wenn du keine DOM-knoten-operationen magst.
Soll wohl ein trick sein mit dem sich so manches mal der IE zum
mitspielen überreden lässt...

Hoffe das hilft
Juri Leino

Juri Leino schrieb:

[HTMLelement].innerHTML = [HTMLelement].innerHTML gesetzt wird dürfte dich
interessieren, auch wenn du keine DOM-knoten-operationen magst. Soll wohl
ein trick sein mit dem sich so manches mal der IE zum mitspielen überreden
lässt...

Das Problem besteht ja nicht nur im IE, sondern auch in Geckos bis
einschließlich Firefox 1.0, möglicherweise auch weiteren.
In denen schlägt dieses "Voodoo" nicht an ;-)

Was solls. Da zum Glück nur zwei Elemente auf der Seite überhaupt betroffen
sind, korrigiere ich das Layout jetzt mit Javascript, indem ich die Position
in top umrechne. Da ich mir einen kompletten Parser sparen wollte, hab ich
jetzt zwar Abhängigkeiten vom HTML *und* CSS im Code stehen, dafür ist das
Problem mit 10 Zeilen Code behoben.
Naja, fast: In den betroffenen Browsern geht das Layout bis zum nächsten
Seitenaufruf evtl. kaputt, wenn man die Schriftgröße oder die Breite des
Browserfensters ändert.
Kann ich mit leben, wenn's aber eine Copy&Paste-fertige Komplettlösung gibt,
bin ich immer noch dran interessiert :-)

--
Wolfgang Fellger

Wolfgang Fellger schrieb:

Kann ich mit leben, wenn's aber eine Copy&Paste-fertige Komplettlösung gibt,
bin ich immer noch dran interessiert :-)
noch mehr voodoo...

schon mal
#overlay { bottom: 0; }
probiert?

jl