Heiner Lamprecht: JS abhängig vom Doctype?

Hallo zusammen,

ich entwickle zur Zeit eine Web-Applikation, bei der ich per JavaScript ein kleines Icon (id="marker") verschieben möchte.  Dazu gibt es zwei JS-Funktionen:

-------------------------------------------------------------------
function MarkItem(xPos, yPos)
{
  document.getElementById("marker").style.marginLeft = xPos - 5;
  document.getElementById("marker").style.marginTop = yPos - 5;
  document.getElementById("marker").style.display = "block";
}

function HideMarker()
{
  document.getElementById("marker").style.display = "none";
}
-------------------------------------------------------------------

Auf der Seite gibt es ferner eine Reihe von Links wie diesen hier:

-------------------------------------------------------------------
<a href="#"
  onmouseover="this.blur(); MarkItem(62,80); return false;"
  onmouseout="this.blur(); HideMarker(); return false;">Item</a>
-------------------------------------------------------------------

Soweit, so gut.  In allen Browsern, die ich zum Testen (Konqueror, Firefox, Opera und IE) nehme, klappt es wunderbar.  Aber nur, solange die Webseite _nicht_ mit der Angabe über den Doctype (XHTML 1.0 Strict bzw. Transitional) beginnt.  In diesem Fall ist nur noch der IE in bereit, das Icon zu positionieren.  Die anderen führen die Funktion aus und blenden das Icon auch ein bzw. aus, aber nur an der Position, die es beim Aufbau der Seite hat.

Zum einen verstehe ich nicht, warum das der Fall ist?  Zum anderen möchte ich gerne wissen, ob es eine andere Möglichkeit gibt, trotz der Doctype-Angabe ein korrektes Verhalten in den anderen Browsers zu erreichen?

Heiner

  1. Hi,

    Soweit, so gut.  In allen Browsern, die ich zum Testen (Konqueror, Firefox, Opera und IE) nehme, klappt es wunderbar.  Aber nur, solange die Webseite _nicht_ mit der Angabe über den Doctype (XHTML 1.0 Strict bzw. Transitional) beginnt.

    was passiert, wenn man keinen hinreichend günstigen DOCTYPE angibt? Der Browser wechselt in den Quirks-Mode. Was ist der Quirks-Mode? Das ist jener Modus, in dem der Browser davon ausgeht, dass der Autor nur ein begrenztes Maß an technischem Wissen besitzt und somit Fehler macht. Was passiert also im Quirks-Mode? Der Browser verzeiht Fehler. Was ist also, wenn etwas nur im Quirks-Mode funktioniert? Es ist fehlerhaft.

    document.getElementById("marker").style.marginLeft = xPos - 5;

    Welchen Wert versuchst Du hier der CSS-Eigenschaft margin-left zuzuweisen?

    Zum anderen möchte ich gerne wissen, ob es eine andere Möglichkeit gibt, trotz der Doctype-Angabe ein korrektes Verhalten in den anderen Browsers zu erreichen?

    Der Browser verhält sich nur hier korrekt. Ohne den DOCTYPE macht er Fehler.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo,

      document.getElementById("marker").style.marginLeft = xPos - 5;

      Welchen Wert versuchst Du hier der CSS-Eigenschaft margin-left zuzuweisen?

      Die Koordinaten werden beim Aufruf der Funktion übergeben.  Korrekt umrechnen tut JS auch.  Auch mit Doctype.  Somit verstehe ich immer noch nicht, wo der Fehler ist.

      Zum anderen möchte ich gerne wissen, ob es eine andere Möglichkeit gibt, trotz der Doctype-Angabe ein korrektes Verhalten in den anderen Browsers zu erreichen?

      Der Browser verhält sich nur hier korrekt. Ohne den DOCTYPE macht er Fehler.

      Und wo ist jetzt definiert, dass ich im HTMl-Code die CSS-Eigenschaft setzen kann, aber nicht per JS ändern?

      Heiner

      1. Hi!

        Ich misch mich einfach mal ein...

        Die Koordinaten werden beim Aufruf der Funktion übergeben.  Korrekt umrechnen tut JS auch.  Auch mit Doctype.  Somit verstehe ich immer noch nicht, wo der Fehler ist.

        Wie war das noch in der Schule?
        Lehrer: Was ist das Ergebnis?
        Schüler: 13
        Lehrer: Äpfel? Birnen? Bananen?

        Was ist denn margin-left: 15?

        Und wo ist jetzt definiert, dass ich im HTMl-Code die CSS-Eigenschaft setzen kann, aber nicht per JS ändern?

        Nirgendwo, der Unterschied liegt daran, was der Browser annimmt, was die Angabe 15 bedeutet, je nachdem ob er denkt "das ist alles was da kommt und ich füge nichts hinzu" oder "das ist alles, da fehlt noch was, ich ergänze mal einen Standardwert".

        MfG
        Rouven

        --
        -------------------
        ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:(
        1. Hi,

          Die Koordinaten werden beim Aufruf der Funktion übergeben.  Korrekt umrechnen tut JS auch.  Auch mit Doctype.  Somit verstehe ich immer noch nicht, wo der Fehler ist.
          Wie war das noch in der Schule?
          Lehrer: Was ist das Ergebnis?
          Schüler: 13
          Lehrer: Äpfel? Birnen? Bananen?

          Ich bin halt schon zu lange aus der Schule raus ...

          Und wo ist jetzt definiert, dass ich im HTMl-Code die CSS-Eigenschaft setzen kann, aber nicht per JS ändern?
          Nirgendwo, der Unterschied liegt daran, was der Browser annimmt, was die Angabe 15 bedeutet, je nachdem ob er denkt "das ist alles was da kommt und ich füge nichts hinzu" oder "das ist alles, da fehlt noch was, ich ergänze mal einen Standardwert".

          Das waren aber ziemlich dicke Tomaten auf meinen Augen ;-)

          Danke, Rouven, jetzt klappt es wie gewünscht!

          Heiner