Thomas N: DOCTYPE-Varianten mit ohne Link? Bei mozilla, Unterschied?

Hallo,

folgende Browser stellen meine Tabllen-Kontrukte nicht richtig dar, wenn ich einen DOCTYPE verwende, ohne geht es.
Die NS 4.x, siehe unten stellen es aber dar, deshalb bin ich im Unklaren, was los ist.

Im Forums-Archiev hab ich etwas in die richtung gefunden, aber so ganz schlau werde ich daraus nicht.

DOCTYPE-Probleme bei Mozilla 1.0 / Netscape 6.2
http://forum.de.selfhtml.org/archiv/2002/7/16500/#m92241
Tabelle mit nix.gif in HTML 4.01 Transitional
http://forum.de.selfhtml.org/archiv/2002/7/16794/#m93994
<!doctype ...> (bitte nicht prügeln!)
http://forum.de.selfhtml.org/archiv/2002/6/15351/#m85644

Zitat: "Die neueren Browser (IE 6 und Mozilla) sind alle in der Lage, den sogenannten
"Standards compliant mode" einzuschalten, bei dem sich das Layout streng an den Vorgaben vom W3C orientiert."
http://forum.de.selfhtml.org/archiv/2002/5/13187/#m72939
Was ist der: "Standards compliant mode"?

Aber ich hab es nun explizit mit den unten genannten DOCTYPE-Varianten probiert.
Nur was ist der Unterschied?
Ganz konkret diese zwei DOCTYPE-Varianten, was macht der Browser da?
Bitte ganz bildlich trivial gesprochen! :-))

Hier meine Tests usw.:
-----------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- das geht nicht! -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     <!-- das geht! -->

Gecko/20011128 Netscape6/6.2.1

Netscape 7.0 Preview Release 1
Gecko/20020512 Netscape/7.0b1

Mozilla 1.0
Gecko/20020510
Gecko/20020530
-----------------------------------------
-----------------------------------------
Die fressen es alle:

OPERA
Version: 6.0, Build: 1010
Version: 6.03, Build: 1107
Plattform: Win32

Netscape® Communicator 4.08
Netscape® Communicator 4.73
Netscape® Communicator 4.78
Netscape NavigatorTM Version 3.03 [de]
IE 5.5
-----------------------------------------

Hier ein Screenshot:

<img src="http://www.ablage.com/1/doct/scrennmoz.gif" border=0 alt="">

Hier 2 HTML-Versionen zum testen, ohne und mit (DOCTYPE Transitional):
http://www.ablage.com/1/doct/test/

Viele Grüsse
Thomas N == Neu-User

  1. hi

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- das geht nicht! -->

    standards mode (wo eben dein Problem auftritt)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     <!-- das geht! -->

    sloppy-mode, da frisst der alles.

    kurz gesagt, deine Bilder stehen nicht unten auf der Zelle, sondern auf der sog. baseline - wunderbar zu sehen, wenn man einigen Text daneben hat. idr. reicht schon valign="bottom" an die Bilder, oder man setzt sie mit CSS auf display:block;. Es gibt noch einige weitere Wege, wie evtl. besser klappen.

    Grüße aus Bleckede

    Kai

    1. hi,

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- das geht nicht! -->

      standards mode (wo eben dein Problem auftritt)

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     <!-- das geht! -->

      sloppy-mode, da frisst der alles.

      Was ist sloppy-mode?
      http://www.google.de/search?hl=de&ie=UTF-8&oe=UTF-8&q=sloppy-mode&meta=lr%3Dlang_de
      Nur komischen "self-Threads"? :-(

      http://selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp
      Zitat:
      "Ferner enthält die Dokumenttyp-Angabe eine Web-Adresse. Die Angabe dieser Adresse ist nicht zwingend nötig. Eine Angabe wie:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      ist also ebenfalls erlaubt.
      Über die angegebene Web-Adresse kann eine auslesende Software die Dokumenttyp-Definitionen (DTD) aufrufen und in den darin notierten Regeln "nachgucken". Die meisten heutigen Browser tun das bei HTML allerdings nicht, weil sie ohnehin bei vielen Web-Seiten mit übelsten Sprachverunstaltungen rechnen müssen und die Fähigkeit, auch nicht regelgerechtes HTML ordentlich auf den Bildschirm zu bringen, zugunsten der "reinen Lehre" opfern. Das eigentlich gewünschte Verhalten ist allerdings, dass ein Browser dann, wenn eine HTML-Datei eine Dokumenttyp-Angabe enthält, auch auf der Einhaltung der Regeln dieses Dokumenttyps besteht."

      Heisst nun für einen Neu-User, da er wahrscheinlich nicht voll zur "reinen Lehre" konform geht, lieber den Link weg zu lassen?
      Aber was ist der Unterschied?

      kurz gesagt, deine Bilder stehen nicht unten auf der Zelle, sondern auf der sog. baseline - wunderbar zu sehen, wenn man einigen Text daneben hat. idr. reicht schon valign="bottom" an die Bilder, oder man setzt sie mit CSS auf display:block;. Es gibt noch einige weitere Wege, wie evtl. besser klappen.

      Habe in jedes (<td> mit Bild) <td valign="bottom"> gesetzt aber verrutscht genauso wie vorher, mit:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      im Gecko/20020510 (Mozilla/5.0).
      siehe:
      http://www.ablage.com/1/doct/test/site-info_transd2.htm

      Viele Grüsse
      Thomas N == Neu-User

      1. Was ist sloppy-mode?

        Eigentlich Quirksmode. Ahmt das schlechte Verhalten alter Browser nach.
        http://mozilla.org/docs/web-developer/quirks/doctypes.html

        Zum Baselineproblem: http://developer.netscape.com/evangelism/docs/articles/img-table/

        Gruß Herbalizer

        1. <---        Begrüssung?

          hi,

          Was ist sloppy-mode?
          Eigentlich Quirksmode. Ahmt das schlechte Verhalten alter Browser nach.
          http://mozilla.org/docs/web-developer/quirks/doctypes.html

          "All" about "DOCTYPE und DOCTYPE-Switching" and Quirksmode:
          http://www.kaipahl.de/brain/brain_index.html#doctype

          Gibt es nicht auch was gscheits in DAU-däutsch? Arghh! :-( Quirks!

          Das scheint ne echte Marktlücke zu sein, wie wäre es mal mit einem Feature-Artikel? Ich würd gleich einen schreiben, wenn ich besser Englisch könnte! Wenn ich jetzt einen schreiben sollte, würde das Thema "HTML ist doof" lauten. :-( sloppy!

          Zum Baselineproblem: http://developer.netscape.com/evangelism/docs/articles/img-table/

          Wie bitte?
          http://www.google.com/search?q=Blasenproblem&hl=de&lr=&ie=UTF-8&oe=UTF-8&sa=n&oq=Baselineproblem

          Gruß
          Thomas N == Neu-User

          *nullbockhängerstimmung*

          1. hi

            sorry, war vohin etwas kurz angebunden... Mozilla/BeOS hat doch mehr Bugs als ich erwartet hatte (um genau zu sein ist er fast so schlimm, wie die ersten Milestones unter Windows oder Linux, nur stabiler).

            Verpass allen Bildern, um die es geht eine class="alone" und schreib das hier in den Head:
            <style type="text/css">@media all{ img.alone{display:block;} }</style>

            dann is der Abstand weg. (naja, oder lass einfach die URL weg ;)

            Mozilla 1.0 (und MSIE6) haben 2 Layout-Modi:
            1. quirks- oder sloppy-mode, wo einige gängige HTML- und CSS-Fehler gnadenlos hingenommen werden (':hover' wird als 'a:link:hover,a:visited:hover' gelesen oder Einheiten in CSS werden als "px" angenommen, oder eben dieser Abstand). Diese Fehler sind Verstöße gegen die Regeln vom W3C, die zu Problemen führen können. In deinem konkreten Fall ist eine 'line-height' für die Zelle in Quirks-Mode wirkungslos. Dabei haben übrigens beide Browser eine etwas andere Auffassung, wo der Unterschied liegen soll. Während der MSIE nur einen groben Rechenfehler los wird und (warum auch immer) keine farbigen Scrollbars mehr zuläßt, ist bei Mozilla der Unterschied deutlich größer und einige der neuen Features (z.B. :hover) funktionieren nur in Standards-Mode, weil sonst bestehende Seiten Probleme kriegen würden.

            Und jetzt nochwas für dich wichtiges:
            Mit Mozilla 1.1 wird es einen dritten Modus geben. Dabei wird Mozilla sich zwar weitgehend an die Standards halten, allerdings werden einige Eigenarten des Standards, die nur schwer den Webdesignern näher zu bringen sind (u.a. weil sie nicht so schön prägnant im Standard formuliert sind, wie etwa die Einheiten-Geschichte) nicht mehr beachtet. (ein weiterer Grund ist, dass die IBM-Website, bei der eine Umstellung auf Standards ewig dauern würde -> einige 100.000 Seiten - diese Dinger benötigt). Unter anderem wird jetzt eben auch dieser Abstand weggelassen - mit der oben genannten Nebenwirkung. In dem Modus landet man, wenn ein Mozilla 1.0 auf Standards schaltet, aber die DTD eine "Transitional"-Variante ist, oder wenn man IBM's Haus-DTD benutzt [siehe http://www.ibm.com

            Grüße aus Bleckede

            Kai

            1. hi

              sorry, war vohin etwas kurz angebunden... Mozilla/BeOS hat doch mehr Bugs als ich erwartet hatte (um genau zu sein ist er fast so schlimm, wie die ersten Milestones unter Windows oder Linux, nur stabiler).

              Meilensteine? :-)

              Verpass allen Bildern, um die es geht eine class="alone" und schreib das hier in den Head:
              <style type="text/css">@media all{ img.alone{display:block;} }</style>

              dann is der Abstand weg. (naja, oder lass einfach die URL weg ;)

              Dein Tip funktioniert wunderbar, aber die URL lass ich trotzdem weg!

              Mozilla 1.0 (und MSIE6) haben 2 Layout-Modi:

              1. quirks- oder sloppy-mode, wo einige gängige HTML- und CSS-Fehler gnadenlos hingenommen werden...

              Folgenden Gedanken habe ich nun mitbekommen:

              "HTML-Parser

              Unter einem HTML-Parser versteht man eine Software, die HTML-Auszeichnungen erkennt in strukturierten Text umsetzt. Jeder Web-Browser verfügt über einen HTML-Parser, um überhaupt mit HTML klarzukommen.
              Solche HTML-Parser werden nun leider auf den meisten Webseiten mit Syntax-Fehlern in der Textauszeichnung konfrontiert.
              ...Strenge Parser, die genau gegen die HTML-Regeln prüfen, müssten die Umsetzung solcher Web-Seiten eigentlich abbrechen, und anstelle der Seite würden die Browser dann nur eine lapidare Fehlermeldung anzeigen.
              Da ein solcher Browser am breiten Markt jedoch keine Chance hätte, weil er kaum eine bekannte Web-Seite anzeigen würde, sind die HTML-Parser der heute verbreiteten Browser ziemlich gutmütige Wesen,...
              Am weitesten in dieser Kunst hat es der HTML-Parser des MS Internet Explorers gebracht.
              ...aber Fachleute rümpfen aus dem gleichen Grund gerne die Nase über diesen Browser mit dem Argument, dass er durch sein Verhalten das schlampige und fehlerhafte Kodieren von HTML nur fördere."

              ("Webdesign in a nutshell" dt. Ausgabe der 2. Auflage):
              "Bis vor kurzem lautete die Empfehlung zwar, dass HTML-Dokumente mit einer DOCTYPE-Deklaration beginnen sollten, aber es steckte nicht viel praktischer Nutzen dahinter.
              Das ist nun anders, und Sie können DOCTYPE jetzt dazu verwenden, den neuesten Browsern ihr volles Potential zu entlocken. NS 6 u. IE 6 schalten in standartgerechten Mode, wenn ihnen das gesagt wird."

              Ganz pragmatisch!
              Was bedeutet dies alles für die Praxis? Und wie finde ich die für *meine Situation* beste Methode?

              Was kann man einem "Anfänger" empfehlen? Wohl dieses, ohne URL:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

              Aber zum Verständnis, mit *strict* habe ich mehr Kontrolle, bei den "neueren" Browsern - seh ich das richtig? - nur was ist dann mit den "älteren" Browsern?

              Da würde ich mich noch über eine knappe Antwort freuen.

              Und jetzt nochwas für dich wichtiges:
              Mit Mozilla 1.1 wird es einen dritten Modus geben. ... In dem Modus landet man, wenn ein Mozilla 1.0 auf Standards schaltet, aber die DTD eine "Transitional"-Variante ist, oder wenn man IBM's Haus-DTD benutzt [siehe http://www.ibm.com

              Eine eigene DTD, ja das wäre was für mich! :-)

              Grüße
              Thomas N == Neu-User

              P.S. zum schluss noch Verwirrung "total".

              IE 5.5
              <img src="http://www.ablage.com/1/doct/ie5.5.gif" border=0 alt="">

              Mozi
              <img src="http://www.ablage.com/1/doct/moz.gif" border=0 alt="">

              Muss wohl was bei  mir falsch sein! Aber was?
              Hier das Bsp.:
              http://www.ablage.com/1/doct/test/tabelle_2.htm

              1. hi

                Meilensteine? :-)

                so wurden die ersten preview-Versionen von Mozilla genannt. Grib so zu beschreiben: Rendert alles as standardkonform ist, beim Scrillen fiel es dann auseinander und jeder Syntaxfeher konnte einen Absturz verursachen.

                ...Strenge Parser, die genau gegen die HTML-Regeln prüfen, müssten die Umsetzung solcher Web-Seiten eigentlich abbrechen, und anstelle der Seite würden die Browser dann nur eine lapidare Fehlermeldung anzeigen.

                ..wie es bei XML auch gemacht wird (Ausnahmen: Opera [der leider einen tolleranten XML-Parser hat] und Amaya [der zumindest soweit darstellt, bis der Fehler kommt])

                ...aber Fachleute rümpfen aus dem gleichen Grund gerne die Nase über diesen Browser mit dem Argument, dass er durch sein Verhalten das schlampige und fehlerhafte Kodieren von HTML nur fördere."

                jup, die Fehlertolleranz des IE nervt oftmals - er deutet mehr als sich an die Regeln zu halten - so geht eben auch mal etwas schief, was der IE eigentlich könte, wo er aber das genze mistversteht...

                Was bedeutet dies alles für die Praxis? Und wie finde ich die für *meine Situation* beste Methode?

                Standards-mode erzwingen und die HTML-Dateien durch den Validator <validator.w3.org> jagen - man beachte, dass sich konqueror und Opera meistens eh so verhalten, wie die beiden großen im Standards-mode.

                Aber zum Verständnis, mit *strict* habe ich mehr Kontrolle, bei den "neueren" Browsern - seh ich das richtig? - nur was ist dann mit den "älteren" Browsern?

                Der einzige Browser, der mit einem Strict-HTML nicht immer zurechtkommt und der noch ansatzweise als lebendig zu bezeichnen ist Netscape 4.

                Eine eigene DTD, ja das wäre was für mich! :-)

                'ne selbstgebaute führt *normalerweise* zum Standards-mode - nur die von IBM eben nicht.

                http://www.ablage.com/1/doct/test/tabelle_2.htm

                interessant..:)
                besonders, wenn man weitertestet:

                Opera -> gleicher käse
                konqueror -> passt
                Amaya -> passt

                Fazit: heb' die Seite gut auf, kann nochmal nützlich werden, wenn mal wieder einer meint, dass IE und Opera das beste Rendering haben ;)

                Grüße aus Bleckede

                kai

              2. Hallo

                Was kann man einem "Anfänger" empfehlen? Wohl dieses, ohne URL:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                Ja
                Der Unterschied, ob mit oder ohne Link, ist, daß bei Notierung
                des Links der Browser diesen benutzt, um das Dokument zu prüfen.
                Ohne Link nimmt der Browser an, daß das Dokument dem Standard
                der Sprache entspricht, er prüft dies jedoch nicht nach.

                Aber zum Verständnis, mit *strict* habe ich mehr Kontrolle, bei den "neueren" Browsern - seh ich das richtig? -

                Nicht wirklich, "strict" und "transitional" sind zwei Dialekte
                der gleichen Sprache, also HTML 4.01. Bei "strict" wird strikt
                zwischen logischer Struktur (zuständig: HTML)
                und optischer Gestaltung (zuständig: CSS) getrennt.
                Schau dich mal bei Selfhtml in der HTML-Referenz bei den Elementen um,
                und sieh dir an, welche Attribute bei transitional erlaubt,
                bei strict jedoch verboten sind.

                Hoffe dir geholfen zu haben,
                Tschüß, Auge

                1. Hallo

                  Ohne URL:
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                  Ja
                  Der Unterschied, ob mit oder ohne Link, ist, daß bei Notierung
                  des Links der Browser diesen benutzt, um das Dokument zu prüfen.
                  Ohne Link nimmt der Browser an, daß das Dokument dem Standard
                  der Sprache entspricht, er prüft dies jedoch nicht nach.

                  Gut, aber warum stellt der Mozi dann das Doc nicht "richtig" dar, wenn der Link drinne ist? Ist das ein Bug?

                  Und offline bringt doch der Link so wieso nichts, oder? Aber auch da gehts ja mit Link nicht in meinem Bsp. Bug?

                  Viele Grüße
                  Thomas N == Neu-User

                  1. Hallo

                    Gut, aber warum stellt der Mozi dann das Doc nicht "richtig" dar, wenn der Link drinne ist? Ist das ein Bug?

                    Dein Quelltext:

                    <!-- 1. ANFANG TABELLE GROSS -->
                    <div style="position:absolute; top:110px; left:10px">
                    <table border="0" cellspacing="0" cellpadding="0" width="750">
                    <tr>
                     <td><img src="../pics/formen/8DA0C5_all/627BAC_1_O_L.gif" width="22" height="20" border="0" alt=""></td>
                     <td bgcolor="#627BAC"> </td>
                     <td><img src="../pics/formen/8DA0C5_all/627BAC_1_O_R.gif" width="21" height="20" border="0" alt=""></td>
                    </tr>
                    <tr><td colspan="3" bgcolor="#627BAC" height="300"> </td></tr>
                                                          ^^^^^^^^^^^^
                                              Es gibt keine height-Angabe in Tabellen!

                    <tr>
                     <td><img src="../pics/formen/8DA0C5_all/627BAC_1_U_L.gif" width="22" height="20" border="0" alt=""></td>
                     <td bgcolor="#627BAC" width="800"> </td>
                                                 ^^^^^
                    Wieso 800, wenn die ganze Tabelle bloß 750 breit ist?
                    Gleiches gilt für die zweite Tabelle.

                    Bug oder nicht Bug, das bleibt hier die Frage.
                    Hier mal das Ergebnis eines Experiments:
                    Nach Festlegung der Schrifthöhe für <td> per CSS auf 1px
                    sind die Lücken weg. Nur mal so als Denkanstoß. (Keine Lösung)

                    Und offline bringt doch der Link so wieso nichts, oder? Aber auch da gehts ja mit Link nicht in meinem Bsp. Bug?

                    Die Frage kann ich auch nicht beantworten.

                    Tschüß, Auge

                    1. Hallo

                      Gut, aber warum stellt der Mozi dann das Doc nicht "richtig" dar, wenn der Link drinne ist? Ist das ein Bug?

                      Dein Quelltext:

                      <!-- 1. ANFANG TABELLE GROSS -->
                      <div style="position:absolute; top:110px; left:10px">
                      <table border="0" cellspacing="0" cellpadding="0" width="750">
                      <tr>
                      <td><img src="../pics/formen/8DA0C5_all/627BAC_1_O_L.gif" width="22" height="20" border="0" alt=""></td>
                      <td bgcolor="#627BAC"> </td>
                      <td><img src="../pics/formen/8DA0C5_all/627BAC_1_O_R.gif" width="21" height="20" border="0" alt=""></td>
                      </tr>
                      <tr><td colspan="3" bgcolor="#627BAC" height="300"> </td></tr>
                                                            ^^^^^^^^^^^^
                                                Es gibt keine height-Angabe in Tabellen!

                      Wie meinst Du das? selfhtml sagt:
                      "(HTML 3.2 / XHTML 1.0)
                      <th height=> oder <td height=>
                      Bestimmt die Höhe einer Tabellenzelle und damit die Höhe aller
                      Zellen der gleichen Tabellenzeile. Als deprecated eingestuft."
                      http://selfhtml.teamone.de/html/tabellen/gestaltung.htm#breiten_hoehen
                      Für (HTML 4.01 Transitional) ist das doch vollkommen OK.

                      <tr>
                      <td><img src="../pics/formen/8DA0C5_all/627BAC_1_U_L.gif" width="22" height="20" border="0" alt=""></td>
                      <td bgcolor="#627BAC" width="800"> </td>
                                                   ^^^^^
                      Wieso 800, wenn die ganze Tabelle bloß 750 breit ist?

                      Ja gut, 800 ist etwas übertrieben aber nimms mal raus, dann zerfällt die Tabelle! :-)

                      Bug oder nicht Bug, das bleibt hier die Frage.
                      Hier mal das Ergebnis eines Experiments:
                      Nach Festlegung der Schrifthöhe für <td> per CSS auf 1px
                      sind die Lücken weg. Nur mal so als Denkanstoß. (Keine Lösung)

                      Hab ich das was übersehen, welche Schrift? Der Denkanstoß hat noch nicht ganz gewirkt.

                      Jetzt mal so nebenbei erwähnt, stand mit den Tabellen die letzten Tage ziemlich auf Kriegsfuss und habe mal wieder den Dreamweaver ausgepackt ;-) - ich war wirklich erstaund welch kuriose Tabellen der gezaubert hat, aber der Witz meine BrowserMannschaft hat dem Dreamweaver diese Tabellen aus der Hand gefressen, dass mir der Mund nur so offen stand!

                      Jetzt weiss ich, Tabellen sind/können ein Mysterium sein! :-)

                      Viele Grüsse
                      Thomas N == Neu-User

              3. hi

                Nochmal ein Tabellen-Bsp.:
                http://www.ablage.com/1/doct/test/docs/tabelle_3.htm
                Sieht im Opera anders aus als im NS4.x
                bzw. IE, Mozi.

                Grüße
                Thomas N == Neu-User