IE rendert nix...?!??? *grrr*

[Felix Riesterer]

Liebe Mitleser,

ich bin (wieder einmal) extrem vom IE enttäuscht!

Da habe ich mich nun zwei Wochen lang dahinter geklemmt, ein Kreuzworträtsel-Quiz mit Javascript zu erzeugen, und nun wird es weder im IE7 noch im IE6 überhaupt angezeigt (obwohl es im DOM vorhanden ist!!).

Über die verhunzte Druckvorschau will ich ja nicht auch noch schimpfen, denn auch der Firefox höchstpersönlich schlampt hier nach Kräften! Nur Opera ist hier mein wahrer Freund...

Kennt jemand einen Trick, wie ich den IE zur Darstellung zwingen kann? Selbst das Entfernen jeglicher CSS-Dateien hat irgendeine Besserung gezeigt, sodass ich keine Ahnung habe, wo ich mit der "Fehlersuche" (offensichtlich ist die Verwendung des IE der tatsächliche Fehler) beginnen soll.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Cheatah]

Hi,

Da habe ich mich nun zwei Wochen lang dahinter geklemmt, ein Kreuzworträtsel-Quiz mit Javascript zu erzeugen, und nun wird es weder im IE7 noch im IE6 überhaupt angezeigt (obwohl es im DOM vorhanden ist!!).

bevor ich mich jetzt durch sämtliche nachgeladenen Scripts durchackere und versuche herauszufinden, auf welche Weise Du weitere Stylesheets einbindest: Das Element ist im IE auf display:none gesetzt. Vermutlich wird die entsprechende Regel aus der matching.css nicht angewendet. Hilft Dir das weiter?

Cheatah

[Felix Riesterer]

Lieber Cheatah,

vielen Dank für Deine Antwort und Hilfestellung!

bevor ich mich jetzt durch sämtliche nachgeladenen Scripts durchackere

Zugegeben, das kann sehr komplex werden. Ich sollte vielleicht die CSS-Dateien hier verlinken... Aber an denen kann es (eigentlich) nicht liegen, denn es wird im Opera und Firefox alles erwartungsgemäß (und wie beabsichtigt) angezeigt!

Das Element ist im IE auf display:none gesetzt. Vermutlich wird die entsprechende Regel aus der matching.css nicht angewendet. Hilft Dir das weiter?

Nein. Welches "Element" meinst Du genau?

Jedes Quiz hat sein eigenes DIV mit eigener CSS-Klasse (und eigener CSS-Datei). Das Kreuzworträtsel wird mit der kreuzwort.css gestylt. Das scheint auch so im IE zu klappen, denn das DIV an sich wird ja angezeigt. Die Tabelle, mit welcher das Kreuzworträtsel realisiert wird, die wird jedoch nicht angezeigt. Ich finde auch nirgendwo, dass dort ein display:none steht.

Mein zentrales Stylesheet lädt eine CSS-Datei nach, in der alle Quiz-DIVs zunächst auf display:none gestellt werden, damit die Lösungen während des Ladens nicht sichtbar sind. Sobald aber das Script sich initialisiert hat, werden die Quiz-eigenen CSS-Dateien nachgeladen und heben dieses display:none wieder auf. So auch im IE beim Kreuzwort-Rätsel.

Woran könnte es denn noch liegen? Irgendwelche verqueren CSS- oder (X)HTML-Rendering-Bugs, von denen ich noch nicht weiß?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Cheatah]

Hi,

Zugegeben, das kann sehr komplex werden. Ich sollte vielleicht die CSS-Dateien hier verlinken...

nö, die zu finden ist leicht ;-)

Aber an denen kann es (eigentlich) nicht liegen, denn es wird im Opera und Firefox alles erwartungsgemäß (und wie beabsichtigt) angezeigt!

Ja, aber es kann daran liegen, dass im IE die Ressourcen nicht eingebunden werden. Du kennst Deine Mechanismen weit besser als ich, vielleicht bringt Dich diese Idee auf die richtige Spur.

Welches "Element" meinst Du genau?

Das, welches ich die ganze Zeit über zwischen den Browsern verglichen habe ;-) Ich beziehe mich auf die <div>-Elemente, die ein Quiz kapseln.

Jedes Quiz hat sein eigenes DIV mit eigener CSS-Klasse (und eigener CSS-Datei).

Eben diese.

Das Kreuzworträtsel wird mit der kreuzwort.css gestylt. Das scheint auch so im IE zu klappen, denn das DIV an sich wird ja angezeigt.

Hm, bei mir nicht; unter der Auflistung der Quizze ist Schluss. JavaScript meine ich aktiviert zu haben, ich muss aber zugeben, dass ich eine komplette Verkonfigurierung nicht ausschließen kann. Dem IE erlaube ich nur ungern etwas ...

Ich werde noch mal ein bisschen rumwuseln.

Cheatah

[Cheatah]

Hi,

[...] ich muss aber zugeben, dass ich eine komplette Verkonfigurierung nicht ausschließen kann.

nach hinreichend intensiven Wiederherstellens von Default-Konfigurationen konnte ich tatsächlich das von Dir beschriebene Szenarion feststellen. Es lag also an mir.

Ich werde noch mal ein bisschen rumwuseln.

Done: Ich habe aus Seamonkey den Generated Source abgespeichert, die Conditional Comments gefixt und das Ergebnis angesehen. Folge: Im IE kommt nix (im Sinne von nix), Seamonkey warnt mich, dass ein Script zu lange ausgeführt wird. Stoppe ich es, fehlt - tadaa! - das Kreuzworträtsel. Kommentiere ich alle Scripts aus, zeigen beide Browser das Kreuzworträtsel an.

Ich habe mir Deine Scripterei noch immer nicht genauer angesehen, aber vielleicht kommst Du ja jetzt auf eine Spur ... für mich sieht es so aus, als würde ein Script Amok laufen. Den Effekt im IE kann ich allerdings trotzdem nicht erklären, diese Symptome sehe ich zum ersten Mal.

Du darfst jetzt debuggen ... ;-)

Cheatah

[Felix Riesterer]

Lieber Cheatah,

Den Effekt im IE kann ich allerdings trotzdem nicht erklären, diese Symptome sehe ich zum ersten Mal.

Du darfst jetzt debuggen ... ;-)

ich danke Dir für Deine wirklich umfangreichen Untersuchungen. Du hast mir sehr geholfen, auch wenn ich mein Problem bisher nicht lösen kann. :-(

Ich werde wohl irgendwie weiter wurschteln müssen (wie ich das hasse!).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Cheatah]

Hi,

ich danke Dir für Deine wirklich umfangreichen Untersuchungen.

nicht dafür. Kannst Du den Testfall minimieren, also vor allem alles entfernen, was nicht mit dem Kreuzworträtsel zu tun hat? Dann würde mir eine weitere Analyse leichter fallen.

Cheatah

[Felix Riesterer]

Lieber Cheatah,

also vor allem alles entfernen, was nicht mit dem Kreuzworträtsel zu tun hat?

habe nun ein reines Kreuzwort-Rätsel hochgeladen, dessen Script-Datei auch keine Funktion mehr für andere Quiz-Arten enthält.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[asdf]

Hey,

sei mir nicht böse, aber knapp zwölfhundert zeilen javascript code ist immer noch eine ganze menge ...

Tschö

[Felix Riesterer]

Liebe(r) asdf,

sei mir nicht böse, aber knapp zwölfhundert zeilen javascript code ist immer noch eine ganze menge ...

stimmt. Aber wenn Du den Kontext brauchst, um den relevanten Teil nachzuvollziehen, dann brauchst Du ein vollständiges und funktionierendes Script.

Für Dich den relevanten Teil ohne Kontext:

// Tabelle befüllen  
for (y = 0; y < grid.length; y++) {  
    test = document.createElement("tr");  
  
    for (x = 0; x < grid[0].length; x++) {  
        i = document.createElement("td");  
        i.id = this.name + "_" + x + "_" + y;  
  
        if (grid[y][x]) {  
            i.className = this.loesungsClass;  
            i.id += "_" + grid[y][x];  
        }  
  
        // Zelleninhalt vorbereiten  
        a = document.createTextNode(String.fromCharCode(160));  
        i.appendChild(a);  
  
        // Zelle in Zeile einhängen  
        test.appendChild(i);  
    }  
  
    // Zeile in Tabelle einhängen  
    this.tabelle.appendChild(test); // "this.tabelle" ist ein zu Anfang leeres (mit document.createElement("table") erstelltes <table>-Element.  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe Mitleser,

ich habe eine Lösung zu meinem Problem gefunden.

Mein Kreuzworträtsel mit Javascript wird nun auch im IE (IE6 und IE7) angezeigt! *freu*

Der technische Hintergrund des Problems:
Wenn ich im IE mittels appendChild ein dynamisch erzeugtes <tr>-Element in ein <table>-Element einhängen möchte, dann wird das (zumindest in meinem Script) vom IE nicht gerendert, obwohl es im DOM vorhanden ist, wie ein alert(meineTabelle.innerHTML) zeigt.

Auch wenn echte Browser diese DOM-Methode klaglos umsetzen, so besteht der IE (traditionsbedingt?) auf der für <table>-Elementobjekte besonderen Methode insertRow(), wenn die neu erzeugte Zeile gerendert werden soll.

var tabelle = document.createElement("table");  
// so nicht im IE:  
var zeile_nonIE = document.createElement("tr");  
tabelle.appendChild(zeile);  
tabelle.insertBefore(zeile, null); // alternativ zu appendChild(), wird im IE ebenfalls nicht gerendert!  
  
// aber so geht es auch im IE  
var zeile_IE = tabelle.insertRow(tabelle.getElementsByTagName("tr").length <= 0 ? 0 : tabelle.getElementsByTagName("tr").length);

Auch wenn für Tabellen eigentlich alle drei Methoden (da DOM-konform) zum zu erwartenden Ergebnis führen sollten, so muss ich für den IE der insertRow()-Methode den Vorzug geben, da dieser im Falle von Tabellen hier eine völlig andere Herangehensweise zu brauchen scheint.

Möge diese meine Erkenntnis jemandem von Nutzen sein. Lohnt sich ein entsprechender Hinweis in der <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=SELFHTML-Seite zu Tabellen> (vor allem im Script-Beispiel)?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Patrick Andrieu]

Hallo Felix!

Mein Kreuzworträtsel mit Javascript wird nun auch im IE (IE6 und IE7) angezeigt! *freu*

Glückwunsch. Bei der "Wald bildenden Pflanze" habe ich 'ne kurze Zeit den Wald vor lauter Bäumen nicht gesehen ;)

Die Seite hat eine lange Ladezeit, ist es aufgrund der langen Scripte so?

Patrick

[Felix Riesterer]

Lieber Patrick,

Glückwunsch.

Danke! :-)

Bei der "Wald bildenden Pflanze" habe ich 'ne kurze Zeit den Wald vor lauter Bäumen nicht gesehen ;)

*g*

Die Seite hat eine lange Ladezeit, ist es aufgrund der langen Scripte so?

Ja. Die Initialisierung lädt sieben CSS-Dateien nach und rechnet eine Weile am Kreuzworträtsel herum. Die Quizze werden erst nach der vollständigen Initialisierung sichtbar geschaltet.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Der technische Hintergrund des Problems:
Wenn ich im IE mittels appendChild ein dynamisch erzeugtes <tr>-Element in ein <table>-Element einhängen möchte, dann wird das (zumindest in meinem Script) vom IE nicht gerendert, obwohl es im DOM vorhanden ist, wie ein alert(meineTabelle.innerHTML) zeigt.

Öhm, das ist aber in der Tat schon ein uraltes Problem, was hier immer mal wieder auftaucht und immer wieder gleich beantwortet wird.

Auch wenn echte Browser diese DOM-Methode klaglos umsetzen, so besteht der IE (traditionsbedingt?) auf der für <table>-Elementobjekte besonderen Methode insertRow(), wenn die neu erzeugte Zeile gerendert werden soll.

Diese Methode (und ihre Genossen) verwende ich bevorzugt, daran ist nichts „Besonderes“.

Einen schönen Samstag noch.

Gruß, Mathias

[Felix Riesterer]

Lieber Mathias,

Öhm, das ist aber in der Tat schon ein uraltes Problem, was hier immer mal wieder auftaucht und immer wieder gleich beantwortet wird.

verzeihe mir, aber in dieser Hinsicht bin ich kein sooo aufmerksamer Leser des Forums. Warum hast Du mich denn dann nicht "gleich" darauf aufmerksam gemacht? ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

verzeihe mir, aber in dieser Hinsicht bin ich kein sooo aufmerksamer Leser des Forums. Warum hast Du mich denn dann nicht "gleich" darauf aufmerksam gemacht? ;-)

Als ich dein Posting gelesen habe, war das direkt mein erster Gedanke.
Ich habe den Thread aber erst eben angefangen zu lesen, weil die Kategorie Browser mich wenig interessiert.

Struppi.

[Mathias Brodala]

Hallo Felix.

Öhm, das ist aber in der Tat schon ein uraltes Problem, was hier immer mal wieder auftaucht und immer wieder gleich beantwortet wird.

verzeihe mir, aber in dieser Hinsicht bin ich kein sooo aufmerksamer Leser des Forums.

Ist ja auch nicht schlimm.

Warum hast Du mich denn dann nicht "gleich" darauf aufmerksam gemacht? ;-)

Weil mich Threads rund um die Rendering-Probleme des IEs wenig interessieren; ist einfach nur langweilig.

Einen schönen Samstag noch.

Gruß, Mathias

[Der Martin]

Hallo Felix,

Wenn ich im IE mittels appendChild ein dynamisch erzeugtes <tr>-Element in ein <table>-Element einhängen möchte, dann wird das (zumindest in meinem Script) vom IE nicht gerendert, obwohl es im DOM vorhanden ist, wie ein alert(meineTabelle.innerHTML) zeigt.

ja, das ist aber doch nichts Neues. Es wurde hier schon öfter darauf hingewiesen, dass der IE in Tabellen großen Wert darauf legt, dass tr kein direktes Kind von table ist, sondern noch ein tbody-Element dazwischen ist. Bei "statischem" HTML ergänzt er das intern selbst, beim dynamischen Aufbau des Dokuments über DOM-Methoden allerdings nicht.

So long,
 Martin

[Felix Riesterer]

Lieber Martin,

Es wurde hier schon öfter darauf hingewiesen, dass der IE in Tabellen großen Wert darauf legt, dass tr kein direktes Kind von table ist, sondern noch ein tbody-Element dazwischen ist. Bei "statischem" HTML ergänzt er das intern selbst, beim dynamischen Aufbau des Dokuments über DOM-Methoden allerdings nicht.

IN DIE DOKU DAMIT!!!! Das hätte mir soviel Suchen erspart... Und komme mir jetzt keiner mit einem <I>!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Es wurde hier schon öfter darauf hingewiesen, dass der IE in Tabellen großen Wert darauf legt, dass tr kein direktes Kind von table ist, sondern noch ein tbody-Element dazwischen ist. Bei "statischem" HTML ergänzt er das intern selbst, beim dynamischen Aufbau des Dokuments über DOM-Methoden allerdings nicht.

IN DIE DOKU DAMIT!!!! Das hätte mir soviel Suchen erspart... Und komme mir jetzt keiner mit einem <I>!

Ich komme dir mit einem <W3C>.

Einen schönen Samstag noch.

Gruß, Mathias