Ralf: Problem mit DOCTYPE und/oder position:relative im IE

Hallo,

ich möchte mit folgender Konstruktion erreichen, dass Text nur innerhalb eines bestimmten Bereiches angezeigt wird:

  
<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN">  
<body bgcolor=buttonface>  
<div id="Preview" style="width:333px;height:150px">  
  <table style="background:white"><tr><td>  
    <div style="overflow:hidden;background:lightblue;margin:5mm;width:60mm;height:20mm">  
      <span style="position:relative;white-space:nowrap">  
          Dieser Text ist zu lang und soll nur in dem hellblauen Bereich ohne Umbruch erscheinen.  
      </span>  
    </div>  
  </td></tr></table>  
</div>  
</body>  

Das funktioniert im Firefox, aber nicht im IE. Wenn ich jedoch die DOCTYPE Definition weglasse, klappt es. Die habe ich aber für das korrekte Box-Modell drin.
Es klappt auch, wenn ich position:relative beim SPAN wegnehme. Dies wird aber benötigt, weil der Bereich positioniert werden soll (left/top kommen später hinzu).

Mache ich was falsch bzw. wie kann ich das Problem umgehen?

Ralf

  1. Hallo Ralf,

    ich nehme an, dein Codeauszug ist stark gekürzt? Denn sonst wäre das ein ungültiges HTML-Dokument - ohne head und das darin enthaltene title-Element.

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

    Was soll das? Ich meine, die Backslash-Sammlung? Das ist zumindest kein gültiger DOCTYPE. Und selbst wenn du die '' weglässt, wäre es kein DOCTYPE, der den IE6 in den Standards Mode schalten würde, denn er ist unvollständig. Nur mit einem _vollständigen_ DOCTYPE mit expliziter DTD-Angabe schaltet der IE6 in den Standards Mode. Und auch das nur, wenn dieser DOCTYPE in der ersten Zeile des Dokuments steht.

    <body bgcolor=buttonface>
    <div id="Preview" style="width:333px;height:150px">
      <table style="background:white"><tr><td>
        <div style="overflow:hidden;background:lightblue;margin:5mm;width:60mm;height:20mm">

    Hältst du es für eine gute Idee, bildschirmbezogene Maße in mm anzugeben? Ich nicht.

    <span style="position:relative;white-space:nowrap">
              Dieser Text ist zu lang und soll nur in dem hellblauen Bereich ohne Umbruch erscheinen.
          </span>

    Das tut er auch - aber das span-Element ist so groß wie sein Inhalt Und ragt daher wahrscheinlich aus dem umgebenden div heraus und wird wegen overflow:hidden abgeschnitten. Und?

    </div>
      </td></tr></table>
    </div>
    </body>

    Das funktioniert im Firefox, aber nicht im IE. Wenn ich jedoch die DOCTYPE Definition weglasse, klappt es. Die habe ich aber für das korrekte Box-Modell drin.

    Und dafür taugt sie in dieser Form nicht (siehe oben).

    Mache ich was falsch bzw. wie kann ich das Problem umgehen?

    Ich verstehe leider noch nicht, a) was du eigentlich genau erreichen willst und b) was stattdessen wirklich passiert. Wie wär's, wenn du einfach zwei Testseiten online verlinkst und dann hier nochmal anhand dieser Beispielseiten genau erklärst, was du eigentlich möchtest.

    So long,
     Martin

    --
    Es gibt Tage, da gelingt einem einfach alles.
    Aber das ist kein Grund zur Sorge; das geht vorbei.
    1. Hallo Martin

      ich nehme an, dein Codeauszug ist stark gekürzt? Denn sonst wäre das ein ungültiges HTML-Dokument - ohne head und das darin enthaltene title-Element.

      Das ist extrem gekürzt und auf das reduziert worden, was für die Funktion erforderlich ist

      Was soll das? Ich meine, die Backslash-Sammlung? Das ist zumindest kein gültiger DOCTYPE.

      Sorry - hatte vergessen die Backslashes rauszunehmen. Der Code wird per Javascript erzeugt und da müssen die Slashes maskiert werden. Denk dir also einfach die Backslashes weg ;)

      Und selbst wenn du die '' weglässt, wäre es kein DOCTYPE, der den IE6 in den Standards Mode schalten würde, denn er ist unvollständig. Nur mit einem _vollständigen_ DOCTYPE mit expliziter DTD-Angabe schaltet der IE6 in den Standards Mode. Und auch das nur, wenn dieser DOCTYPE in der ersten Zeile des Dokuments steht.

      Diese Diskussion hatte ich hier schon mal und meine Angabe reicht für das Box-Modell aus (steht jedenfalls so in SELFHTML und wird auch durch die praktische Erfahrung bestätigt).

      Hältst du es für eine gute Idee, bildschirmbezogene Maße in mm anzugeben? Ich nicht.

      Spielt doch hier gar keine Rolle. Außerdem handelt es sich um eine Vorschau für eine Druckausgabe.

      Das tut er auch - aber das span-Element ist so groß wie sein Inhalt Und ragt daher wahrscheinlich aus dem umgebenden div heraus und wird wegen overflow:hidden abgeschnitten. Und?

      Genau das passiert eben nicht! Zumindest nicht bei mir im IE6. Hast du es ausprobiert?

      Und dafür taugt sie in dieser Form nicht (siehe oben).

      Tut sie aber nachweislich.

      Ich verstehe leider noch nicht, a) was du eigentlich genau erreichen willst und b) was stattdessen wirklich passiert.

      Hab ich doch geschrieben. Ich möchte, dass der Text nur im hellblauen Bereich erscheint, wie es auch durch overflow:hidden angegeben ist.
      Tatsächlich ist er aber vollständig sichtbar (bei mir im IE6). Wenn ich DOCTYPE und/oder position:relative weglasse, funktioniert es ja.

      Wie wär's, wenn du einfach zwei Testseiten online verlinkst und dann hier nochmal anhand dieser Beispielseiten genau erklärst, was du eigentlich möchtest.

      So kompliziert ist doch der Code wohl nicht, dass das nötig wäre. Einfach in eine Datei kopieren und ausführen reicht. Hier die korrigierte Version:

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
      <head><title>test</title></head>  
      <body bgcolor=buttonface>  
      <div id="Preview" style="width:333px;height:150px">  
        <table style="background:white"><tr><td>  
          <div style="overflow:hidden;background:lightblue;margin:5mm;width:60mm;height:20mm">  
            <span style="position:relative;white-space:nowrap">  
                Dieser Text ist zu lang und soll nur in dem hellblauen Bereich ohne Umbruch erscheinen.  
            </span>  
          </div>  
        </td></tr></table>  
      </div>  
      </body>  
      </html>  
      
      

      Ralf

      1. Hab trotzdem mal den Code online gestellt:
        http://stork.gmxhome.de/SELFHTML/test2.htm

        Ralf

      2. Hallo,

        Diese Diskussion hatte ich hier schon mal und meine Angabe reicht für das Box-Modell aus (steht jedenfalls so in SELFHTML und wird auch durch die praktische Erfahrung bestätigt).

        wo steht das? Anyway, in deinem Fall kommt speziell das der Box Model Bug überhaupt nicht zum Tragen, weil er nur die Größenberechnung mit width/height, padding, border und margin betrifft. Das ist aber hier nicht relevant.
        Andere Effekte, die mit dem DOCTYPE-Switch gesteuert werden, mögen aber durchaus eine Rolle spielen.

        Das tut er auch - aber das span-Element ist so groß wie sein Inhalt Und ragt daher wahrscheinlich aus dem umgebenden div heraus und wird wegen overflow:hidden abgeschnitten. Und?
        Genau das passiert eben nicht! Zumindest nicht bei mir im IE6. Hast du es ausprobiert?

        Isch 'abe gar keine IE6. Dieser Murx kommt mir nicht ins Haus.
        Und in meinem guten alten IE5.5 sieht es genau so aus wie beschrieben: Eine weiße Box, darin eine etwas kleinere hellblaue, und darin der Text, der am Rand der blauen Box abgeschnitten wird. Genau wie im Firefox auch.

        Ciao,
         Martin

        --
        Zum Glück ist alles nur halb so doppelt.
        1. Hallo,

          wo steht das?

          Direkt bei der DOCTYPE Erklärung.

          Anyway, in deinem Fall kommt speziell das der Box Model Bug überhaupt nicht zum Tragen, weil er nur die Größenberechnung mit width/height, padding, border und margin betrifft. Das ist aber hier nicht relevant.

          Der Teil, wo es zum Tragen kommt, wurde hier nicht wiedergegeben.

          Andere Effekte, die mit dem DOCTYPE-Switch gesteuert werden, mögen aber durchaus eine Rolle spielen.

          Welche? Hier geht es darum, dass overflow:hidden nicht berücksichtigt wird.

          Isch 'abe gar keine IE6. Dieser Murx kommt mir nicht ins Haus.

          Und ich keinen IE5.5 ...

          Und in meinem guten alten IE5.5 sieht es genau so aus wie beschrieben: Eine weiße Box, darin eine etwas kleinere hellblaue, und darin der Text, der am Rand der blauen Box abgeschnitten wird. Genau wie im Firefox auch.

          Schön - dann ist es ein Problem mit dem IE6. Vielleicht kann das mal jemand bestätigen?

          Ralf

          1. wo steht das?
            Direkt bei der DOCTYPE Erklärung.

            Du meinst hier http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp?

            Da steht dass deine Angabe gültig ist, aber nicht empfohlen.

            Eine Angabe wie:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            ist also ebenfalls erlaubt.

            ....

            ....Da sie ferner bei vielen Web-Seiten mit übelsten Sprachverunstaltungen rechnen müssen, besitzen sie die Fähigkeit, auch nicht regelgerechtes HTML halbwegs ordentlich auf den Bildschirm zu bringen, allerdings oft mit nicht unerheblichen Abweichungen.

            ...

            Das eigentlich gewünschte Verhalten ist allerdings, dass ein Browser dann, wenn eine HTML-Datei eine Dokumenttyp-Deklaration enthält, auch auf der Einhaltung der Regeln dieses Dokumenttyps besteht.

            und dann kommen die empfohlenen Varianten für HTML 4.01

            Struppi.

            --
            Javascript ist toll (Perl auch!)
            1. Es ist immer wieder faszinierend, wie mache sich an der "fehlenden" Adresse stören, die nun nachweislich bei der STRICT-Variante keine Auswirkung hat und auch vor allem mit dem Problem nichts zu tun hat.

              1. Es ist immer wieder faszinierend, wie mache sich an der "fehlenden" Adresse stören, die nun nachweislich bei der STRICT-Variante keine Auswirkung hat und auch vor allem mit dem Problem nichts zu tun hat.

                Wenn du nachfragen als Störung empfindest. Ich versuch mir vorzustellen was du tust und warum du das tust, wenn du aber keine Lust hast, dass sich andere über deine Fragen Gedanken machen, solltest du es vielleicht einfach lassen und keine Fragen stellen.

                Struppi.

                --
                Javascript ist toll (Perl auch!)
                1. Wenn du nachfragen als Störung empfindest. Ich versuch mir vorzustellen was du tust und warum du das tust, wenn du aber keine Lust hast, dass sich andere über deine Fragen Gedanken machen, solltest du es vielleicht einfach lassen und keine Fragen stellen.

                  Sorry - war vielleicht etwas krass ausgedrückt. Ich hatte nur vor einiger Zeit eine Frage gestellt und da war dieser DOCTYPE im Text und damals wurde das auch kritisiert.
                  Deshalb war ich jetzt etwas genervt. Du kannst natürlich nichts dafür.

                  Sicherlich stelle ich hier eine Frage, weil ich eine Antwort erhoffe.
                  Zum Zeitpunkt deiner Antwort war das Problem aber schon "geklärt".

                  Ralf

    1. Und es gibt einen Workaround.

      Wenn man im Container (das Element mit overflow:hidden) ebenfalls position:relative angibt, funktioniert es.

      Damit kann ich leben.

  2. ich möchte mit folgender Konstruktion erreichen, dass Text nur innerhalb eines bestimmten Bereiches angezeigt wird:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <body bgcolor=buttonface>
    <div id="Preview" style="width:333px;height:150px">
      <table style="background:white"><tr><td>
        <div style="overflow:hidden;background:lightblue;margin:5mm;width:60mm;height:20mm">
          <span style="position:relative;white-space:nowrap">
              Dieser Text ist zu lang und soll nur in dem hellblauen Bereich ohne Umbruch erscheinen.
          </span>
        </div>
      </td></tr></table>
    </div>
    </body>

      
    
    > Mache ich was falsch bzw. wie kann ich das Problem umgehen?  
      
    Ich weiß nicht warum du so eine Tag-suppe erzeugst. So:  
    ~~~html
      
    <p style="width:60mm;height:20mm;border:5mm white solid;white-space:nowrap;overflow:hidden;background:lightblue;">  
    Dieser Text ist zu lang und soll nur in dem hellblauen Bereich ohne Umbruch erscheinen.  
    </p>  
    
    

    Funktioniert es sowohl im FF als auch im IE

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Ich weiß nicht warum du so eine Tag-suppe erzeugst.

      Wenn du weitergelesen hättest, wäre dir vielleicht aufgefallen, dass es sich nur um einen Extrakt handelt.
      Die anderen Elemente sind im größeren Zusammenhang durchaus von Bedeutung.
      Ich habe es halt auf den Teil reduziert, der für das Problem von Bedeutung ist.

      Ich hatte gehofft, dass hier jemand das Problem bekannt ist.

      Zum Glück habe ich nach längerem Suchen herausgefunden, dass der Fehler bekannt ist und schließlich auch noch, wie ich ihn umgehen kann.

      Ein schönes Wochenende noch

      Ralf

      1. Hallo Ralf

        Zum Glück habe ich nach längerem Suchen herausgefunden, dass der Fehler bekannt ist und schließlich auch noch, wie ich ihn umgehen kann.

        Post bitte auch, wie du den Fehler umgehen konntest bzw. wo du die entsprechenden Hinweise gefunden hat.
        Wenn jemand mit deinem Problem im Archiv sucht, wird ihm das sicher weit mehr helfen, als nur die Mitteilung, dass du das Problem umgehen konntest.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. Post bitte auch, wie du den Fehler umgehen konntest bzw. wo du die entsprechenden Hinweise gefunden hat.

          Hab ich doch gemacht:
          https://forum.selfhtml.org/?t=137415&m=892632

          Herausgefunden habe ich das durch eigene Versuche, weil ich durch die Schachtelung von Elementen mit position:relative und ohne diese Angabe einen Verdacht hatte.

          Ralf