Es ist zum Heulen mit diesen Browserunterschieden!!

[Felix Riesterer]

Liebes Forum,

heute ist nicht mein Tag.

Da habe ich fleißig an einer Methode gebastelt, wie man mit einfachsten Mitteln interaktive (JavaScript-gestützte) Lernaufgaben erstellen kann, und dann funken mir diverse Browser (alles böse ausser Firefox! ;-)) mit ihren Interpretationen dazwischen!

Am meisten regt mich auf, dass selbst der IE7 sich nicht wie ein einigermaßen anständiger Firefox oder Opera verhalten kann und geradezu herumspackt!!

Was tut ihr in solchen Situationen, wenn's im Firefox endlich wie gewünscht klappt, in anderen Browsern (ich fange an, Opera zu hassen!) und Möchtegern-Browsern (IE5.x ist für mich tot!) aber nur so spinnt und zappelt?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jörn-Dennis Heldt]

Ich verstehe dich. Ich hab momentan mit ähnlichen Problemen zu Kämpfen. Ich hab ein Design erstellt, welches unter Firefox einwandfrei läuft, im IE7 aber falsch angezeigt wird.

Ich versuche momentan jede Möglichkeit zu finden, dieses Problem zu lösen, und wenn ich es nicht schaffe, lasse ich es einfach. WEr den IE benutzt ist selber schuld.

Also lass dich nicht verrückt machen, wenn die nicht so wollen wie du es willst, dann ignoriere es einfach und schreibe auf die erste Seite, das diese Seiten nur für die Browser X, Y und Z optimiert wurden.

Gruß Jörn-Dennis Heldt

[rob]

Hi!

WEr den IE benutzt ist selber schuld.

Tja, könnte man so sehen...
Aber wir wissen ja alle, wie viele Leute mit dem Teil unterwegs sind.

Leute, die Ahnung von der Materie haben, nutzen anständige Browser.
Aber es gibt so viele Leute, die den MSIE einfach deswegen benutzen, weil er bei Windows mit dabei ist.
Viele wissen gar nicht, daß es Alternativen gibt und/oder haben sich darüber noch nie Gedanken gemacht. Da ist halt ein Browser vorhanden. Dieser funktioniert. Warum also einen anderen runterladen und installieren?

BTW: Mich würde ja mal eine Logfile-Auswertung von hier interessieren.
Ich schätze ja mal, daß der MSIE unter den Forumsusern hier nicht allzu weit verbreitet ist...

und wenn ich es nicht schaffe, lasse ich es einfach.

Wenn du dir das erlauben kannst...
Wenn ich eine Seite für einen Kunden erstelle, dann kann ich es mir nicht erlauben, eine Arbeit abzuliefern, die nicht MSIE-tauglich ist.

Also lass dich nicht verrückt machen, wenn die nicht so wollen wie du es willst, dann ignoriere es einfach und schreibe auf die erste Seite, das diese Seiten nur für die Browser X, Y und Z optimiert wurden.

Das halte ich für keinen guten Ratschlag.
Man "optimiert" keine Seiten für einen bestimmten Browser.
Dieses "Optimieren" heißt doch nichts weiter als: "Ich bin zu blöde, eine anständige Seite zu erstellen.
Es kann ja jeder halten wie er mag, aber ich arbeite so lange an einem Projekt, bis es in den gängigen Browsern funktioniert.
Mit Hilfe von Conditional Comments und notfalls auch CSS-Hacks ist es ja nicht allzu schwer, auch die MSIE-Fehler auszugleichen.

Schöner Gruß,
rob

[Mathias Brodala]

Hallo rob.

BTW: Mich würde ja mal eine Logfile-Auswertung von hier interessieren.
Ich schätze ja mal, daß der MSIE unter den Forumsusern hier nicht allzu weit verbreitet ist...

Bitteschön.

Einen schönen Samstag noch.

Gruß, Mathias

[Powl]

Hallo,

Ich verstehe dich. Ich hab momentan mit ähnlichen Problemen zu Kämpfen. Ich hab ein Design erstellt, welches unter Firefox einwandfrei läuft, im IE7 aber falsch angezeigt wird.

Ich versuche momentan jede Möglichkeit zu finden, dieses Problem zu lösen, und wenn ich es nicht schaffe, lasse ich es einfach. WEr den IE benutzt ist selber schuld.

Wenn sonst gar _nichts_ mehr hilft, kannst Du den IE7 in den Quirksmodus schicken. Dann funktioniert er ziemlich genau wie der 6er.

Gruß Jörn-Dennis Heldt

netten Tag
^da Powl

[Felix Riesterer]

Lieber Jörn,

und schreibe auf die erste Seite, das diese Seiten nur für die Browser X, Y und Z optimiert wurden.

... schon klar. Danke.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gernot Back]

Hallo Felix,

Am meisten regt mich auf, dass selbst der IE7 sich nicht wie ein einigermaßen anständiger Firefox oder Opera verhalten kann und geradezu herumspackt!!

Also entgegen der hier von den meisten Koryphäen vertretenen Vorgehensweise entwickle ich immer zuerst für den IE (zuhause für den IE7, auf der Arbeit für den IE6) und schau mir dann immer regelmäßig zwischendurch an, ob auch die anderen Browser noch folgen können. Wenn nicht, versuche ich es an der Stelle, wo es hakt, für den Firefox und schaue dann, ob mit gleichem Ansatz auch die IEs und Opera noch folgen können.

Wenn es dir um interaktive Lernübungen geht; HotPotatoes kennst du doch, oder? Das ist zwar nicht "SELF-made" und auch weit weg von der Barrierefreiheit, unter der du deine Übung im Breadcrumbtrail eingeordnet hast, aber erspart eine Menge Aufwand, der sonst in keinem Verhältnis zum Nutzen steht.

Bei Lernübungen macht es ja die Masse und die Vielfalt des Angebots an Übungen, sonst bringt es kaum was und wird von den Lernenden schnell als langweilig empfunden.

Gruß Gernot

[Felix Riesterer]

Lieber Gernot,

entwickle ich immer zuerst für den IE

gerade in Sachen JavaScript ist mir der IE so absolut keine Hilfe mangels aussagekräftiger Fehlermeldungen und saumäßiger Standardunterstützung, sodass es mir extrem schwer fällt, eine JavaScript-Anwendung mit dem IE zu entwickeln.

Wenn es dir um interaktive Lernübungen geht; HotPotatoes kennst du doch, oder?

Klar! Aber die von Hotpotatoes erstellten HTML-Dateien passen nicht in mein CMS. Leider ist der Code von diesem _Desktop_-Programm so schlecht kombiniert (JavaScript mit vielen globalen Variablen und nicht extern einbindbar - geschweige denn eine Trennung von Daten und "Engine"), dass ich diese HTML-Dateien kaum "umformen" kann, um sie mit meinem CMS kompatibel zu bekommen.

Übrigens scheinen Entwickler nicht daran interessiert zu sein, diese Umstände zu ändern - jedenfalls verhallten meine Email-Anfragen unbeantwortet...

Ganz großes Manko von Hotpotatoes: Du kannst eine Übungsseite optisch und inhaltlich nicht viel über den reinen Übungs-Anteil hinaus gestalten. Du kannst bei Drag&Drop-Übungen auch keine Bilder einbinden (ich denke nicht nur an Anwendungen im sprachlichen Bereich!) und Du kannst andere Seitenbereiche überhaupt nicht befüllen (Links und Texte, die nicht innerhalb der Übung sein sollen). Daher ist dieses an sich nicht schlechte Werkzeug zumindest für meine Zwecke nur mäßig brauchbar! Daher entwickle ich eben meine eigene "Web-Version" dieser Idee.

Das ist zwar nicht "SELF-made" und auch weit weg von der Barrierefreiheit, unter der du deine Übung im Breadcrumbtrail eingeordnet hast, aber erspart eine Menge Aufwand, der sonst in keinem Verhältnis zum Nutzen steht.

"Kein Verhältnis zum Nutzen"? Ich denke da anders.
Ich möchte ja deswegen dieses JavaScript-"Framework" entwickeln, damit man in einem WYSIWYG-Editor mit eben einfachsten Mitteln (siehe Quelltext der Quiz-Seite!) solche Quizze erstellen kann. Es handelt sich immerhin um ein CMS, das speziell auf die Bedürfnisse einer Schulwebsite zugeschnitten ist!

Eine serverseitige Geschichte zum Umwandeln/Auswerten habe ich mir auch schon überlegt, aber Drag&Drop geschieht nun einmal im Browser...

Bei Lernübungen macht es ja die Masse und die Vielfalt des Angebots an Übungen, sonst bringt es kaum was und wird von den Lernenden schnell als langweilig empfunden.

Eben daher muss und soll das Erstellen solcher Übungen maximal einfach sein und maximal schnell zum Erfolg führen -> ein Framework, das sich aus einer HTML-Datei die Dinge pickt, die es erkennt, und das dann daraus die Übungen generiert.

Damit würde letzten Endes mein JavaScript auch für andere Seiten/Webseitenbauer brauchbar, was wiederum den Nutzen steigert und das Verhältnis von Aufwand un Nutzen zu meinen Gunsten ändert... Meinst Du nicht?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Der Martin]

Hallo,

Also entgegen der hier von den meisten Koryphäen vertretenen Vorgehensweise entwickle ich immer zuerst für den IE (zuhause für den IE7, auf der Arbeit für den IE6) und schau mir dann immer regelmäßig zwischendurch an, ob auch die anderen Browser noch folgen können.

das mache ich ganz ähnlich; es ergibt sich bei mir schon allein daraus, dass ich selbst hauptächlich den IE _nutze_, ab und zu auch einen Opera.
Beim Erstellen von Webseiten habe ich daher meistens zwei IEs (einen 5.5er und einen 6er) und einen Opera offen und pendle zwischen den dreien. Firefox kommt nur ab und zu zwischendurch mal dran - entweder zur Kontrolle, oder zum Verfolgen ganz spezieller Fragestellungen. Mit dessen DOM-Inspektor und der LiveHTTP-Extension können die anderen beiden leider nicht mithalten.

Allerdings habe ich meistens mit dem Firefox am ehesten Probleme, weil der oft irgendwelche CSS-Spitzfindigkeiten korrekt im Sinne der Spec, aber völlig dämlich nach meinem persönlichen Verständnis umsetzt (ja, ich finde einige CSS-Festlegungen bescheuert, etwa das Box Model oder Collapsing Margins).

Aber ich muss auch Felix zugute halten, dass er intensiv mit Javascript arbeitet, was ich weitgehend vermeide. Mit _dem_ Schwerpunkt würde ich wohl auch den Firefox empfehlen, auch wenn ich ihn im alltäglichen Gebrauch meide.

Schönes Wochenende noch,
 Martin

[Struppi]

Mit dessen DOM-Inspektor und der LiveHTTP-Extension können die anderen beiden leider nicht mithalten.

Du solltest dir auch noch Web Developer anschauen. Damit lassen sich viele Informationen zusätzlich ermitteln und was gerade für's Forum sehr praktisch ist, live der CSS Code einer fremden Seite bearbeiten.

Struppi.

[Patrick Andrieu]

Hallo Gernot!

Also entgegen der hier von den meisten Koryphäen vertretenen Vorgehensweise entwickle ich immer zuerst für den IE (zuhause für den IE7, auf der Arbeit für den IE6) und schau mir dann immer regelmäßig zwischendurch an, ob auch die anderen Browser noch folgen können. Wenn nicht, versuche ich es an der Stelle, wo es hakt, für den Firefox und schaue dann, ob mit gleichem Ansatz auch die IEs und Opera noch folgen können.

Ich gehe auch genau so vor, nach dem Motto, was der IE kann, können die anderen schon lange und auch besser. Sonst hat man am Ende so viel für den IE zu korrigieren, dass man dann zwangsläufig in der Zwangsjacke endet :)=

Viele Grüße aus Frankfurt/Main,
Patrick

[Felix Riesterer]

Liebes Forum,

es geht weiterhin um mein Script, um mit einfachsten Mitteln interaktive (JavaScript-gestützte) Lernaufgaben zu erstellen...

Jetzt habe ich versucht, mit etwas CSS die Darstellung griffiger zu machen. Operas Drag&Drop-Probleme habe ich mittlerweile im Griff.

Der IE reagiert aber völlig meschugge auf mein neues CSS... Wo liegt mein Denkfehler?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gernot Back]

Hallo Felix,

Am meisten regt mich auf, dass selbst der IE7 sich nicht wie ein einigermaßen anständiger Firefox oder Opera verhalten kann und geradezu herumspackt!!

Ich glaube, was dem IE an deinem Skript noch fehlt, ist bloß eine Funktion, die das Markieren von Text ausschaltet, wenn du ein Element "draggen" willst.

window.document.onselectstart = function () { return false;};

Vergleiche auch:

http://forum.de.selfhtml.org/archiv/2007/2/t146057/#m947713

... wenn es barrierefrei sein soll.

Gruß Gernot

[Felix Riesterer]

Lieber Gernot,

window.document.onselectstart = function () { return false;};

Vergleiche auch:

http://forum.de.selfhtml.org/archiv/2007/2/t146057/#m947713

... wenn es barrierefrei sein soll.

vielen lieben Dank für diesen Hinweis! Ich kannte zwar diese verrückten Eventhandler des IE dem Namen nach (zumindest erinnerte ich mich spontan daran, als ich Deinen Hinweis las...), aber ich wäre von alleine nie auf die Idee gekommen, hier nach einer Lösung zu suchen.

Ich melde mich wieder, wenn es Erfolgsnachrichten gibt! (Ich musste erst einmal Dein Memory-Quiz nachprogrammieren :-P)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Wie bekomme ich den saudämlichen IE ENDLICH einmal in den Griff???

Aktuelles Problem:

<div style="float:left">  
    <p style="float:left">  
        <span style="float:left">Text</span>  
    </p>  
</div>

Wenn ich nun das SPAN-Element verschiebbar mache, dann positioniert der IE das span-Element falsch, da die offset-Werte (offsetLeft/offsetTop) "nicht stimmen". Durch das floaten gerät da irgendetwas völlig durcheinander. [ausprobieren mit einem IE]

Der verwendete Code-Ausschnitt:

// falls das zu ziehende Element noch nicht "losgelöst" wurde, dieses beweglich machen  
if (!Quiz.platzHalter && Quiz.dragElm) {  
    Quiz.platzHalter = Quiz.dragElm.cloneNode(true);  
    Quiz.platzHalter.id = Quiz.dragElm.id + "_geklont";  
    Quiz.platzHalter.style.visibility = "hidden";  
  
// ---- Hier versagt der IE bei verschachtelt gefloateten Elementen ----  
    Quiz.dragElm.style.top = Quiz.dragElm.offsetTop + "px";  
    Quiz.dragElm.style.left = Quiz.dragElm.offsetLeft + "px";  
  
    // Korrekturen an der Position des Drag-Elementes für IE  
    if (document.attachEvent && typeof(Quiz.IE.scrollLeft) == "number") {  
// ---- hier ist natürlich jetzt auch nix mehr zu retten ----  
        Quiz.dragElm.style.top = Quiz.dragElm.offsetTop + 15 + "px";  
        Quiz.dragElm.style.left = Quiz.dragElm.offsetLeft + 15 + "px";  
  
        // Anti-Markierungs-Effekt für IE  
        Quiz.oldDocOnSelectStart = window.document.onselectstart;  
        window.document.onselectstart = function () { return false;};  
    }  
  
    Quiz.dragElm.className += " " + Quiz.draggedClass;  
  
    // Ersatz-Element einfügen (das Original wird für die Mouse-Events benötigt!)  
    Quiz.dragElm.parentNode.insertBefore(Quiz.platzHalter, Quiz.dragElm);  
}

Wer kann mich in die richtige Richtung schubsen, wie ich prüfen kann, welche Korrekturen die offset-Werte benötigen, damit das Drag&Drop wieder wie gewünscht klappt? Wohlgemerkt, echte Browser (getestet FF und Opera) kommen mit obigem Code blendend zurecht!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Das glaubt man nicht, was das für ein Quatsch ist... oder ist es nur die unchristliche Zeit?

Was soll denn bitteschön dieses offsetParent? Ist das sinnvoll? Jedenfalls berechnet der IE damit neue Coordinaten-Räume. Ist ein Element anders positioniert (und da zählt schon, wenn etwas gefloatet wird!), dann bekommt das gefloatete Element neue offset-Koordinaten, beginnend bei (0,0). Will man die echte Position haben, so muss man den DOM-Baum nach oben krabbeln und immer schön die offset-Koordinaten des offsetParent-Elements mitzählen, um auf die gewünschte Position zu kommen.

Die msdn schreibt dazu:
"This method will work and is reliable." - Na, da freue ich mich doch! Und dann empfehlen die dort, es gerade nicht so zu machen, da das bei tiefen Verschachtelungen zu unperformant wäre. Aber das dort beschriebene Beispiel wollte bei mir einfach nicht gelingen. Also sieht mein Code jetzt so aus:

Aktuelles Problem:

<div style="float:left">

<p style="float:left">
        <span style="float:left">Text</span>
    </p>
</div>

  
~~~javascript
// falls das zu ziehende Element noch nicht "losgelöst" wurde, dieses beweglich machen  
if (!Quiz.platzHalter && Quiz.dragElm) {  
    Quiz.platzHalter = Quiz.dragElm.cloneNode(false);  
    Quiz.platzHalter.id = Quiz.dragElm.id + "_geklont";  
    Quiz.platzHalter.style.visibility = "hidden";  
  
    Quiz.dragElm.style.top = Quiz.dragElm.offsetTop + "px";  
    Quiz.dragElm.style.left = Quiz.dragElm.offsetLeft + "px";  
  
    // Korrekturen an der Position des Drag-Elementes für IE  
    if (document.attachEvent && typeof(Quiz.IE.scrollLeft) == "number") {  
        offsetX = 15;  
        offsetY = 15;  
  
        // Positionswirrwarr des IE bei verschachtelt gefloateten Elementen (offsetParent != document.body)  
        if (if (Quiz.dragElm.offsetParent.tagName != "BODY" && quiz.dragElm.offsetParent.tagName != "HTML") {  
            element = Quiz.dragElm;  
  
// ---- die msdn prüft nur auf offsetParent == document.body, aber das reicht offensichtlich nicht!! ----  
            while (element.offsetParent && (element.offsetParent.tagName != "BODY" && element.offsetParent.tagName != "HTML")) {  
                offsetX += element.offsetLeft;  
                offsetY += element.offsetTop;  
                element = element.offsetParent;  
            }  
        }  
  
        Quiz.dragElm.style.left = offsetX + "px";  
        Quiz.dragElm.style.top = offsetY + "px";  
  
        // Anti-Markierungs-Effekt für IE  
        Quiz.oldDocOnSelectStart = window.document.onselectstart; // markiert sonst wild alles  
        Quiz.oldDocOnDragStart = window.document.ondragstart; // klemmt sonst bei Bildern  
        window.document.onselectstart = function () { return false;};  
        window.document.ondragstart = function () { return false;};  
    }  
  
    Quiz.dragElm.className += " " + Quiz.draggedClass;  
  
    // Ersatz-Element einfügen (das Original wird für die Mouse-Events benötigt!)  
    Quiz.dragElm.parentNode.insertBefore(Quiz.platzHalter, Quiz.dragElm);  
}

Hoffentlich nützt das später mal jemandem, der auch Drag&Drop für den IE entwickeln will. Ich jedenfalls werde dann mit diesen Erkenntnissen mein Explorer-Script patchen gehen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

So. Schluss jetzt!

Mein ursprüngliches Projekt "Drag&Drop mit Zielhighlight" ist nun durch dieses Quiz-Script mit zum Ende gebracht worden. Damit hat sich das Studieren der verqueren IE-Events und des etwas seltsamen offsetParent-Prinzips gelohnt.

Wann können diese Selbstherrlichen in Redmond sich eingestehen, dass es außer ihrem Siliziumtal noch Anderes auf der Welt gibt, andere Menschen, die auch gute Software schreiben, und das außerdem durch gegenseitiges Befruchten wesentlich kompatibler und standardisiertere Software produzieren. Stattdessen kochen sie weiterhin ihr selbstverliebtes Süppchen und wollen nun mit unbegründeten rechtlichen Drohungen ebendiese "anderen" auch noch unter die Knute bringen...

Puh! ich geh' jetzt endlich schlafen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

Wenn ich nun das SPAN-Element verschiebbar mache, dann positioniert der IE das span-Element falsch, da die offset-Werte (offsetLeft/offsetTop) "nicht stimmen". Durch das floaten gerät da irgendetwas völlig durcheinander. [ausprobieren mit einem IE]

Du ermittelst die Position nicht korrekt http://www.quirksmode.org/js/findpos.html#

// Anti-Markierungs-Effekt für IE
        Quiz.oldDocOnSelectStart = window.document.onselectstart;
        window.document.onselectstart = function () { return false;};

Es reicht, nach meiner Erfahrung, die onmousemove Funktion mit return false zu beenden.

Struppi.