dartrax: Druckvorschau beim Internet Explorer mit Tabelle display:inline

Hallo!
Folgende HTML-Seite wird in der Vorschau des Internetexplorers 6 falsch dargestellt:
http://dartrax.da.funpic.de/page%200.htm

Die Seite besteht aus mehreren Tabellen mit jeweils einer Spalte, die mit Hilfe des CSS-Attributes display: inline nebeneinander dargestellt werden. Ergebnis ist eine große Tabelle mit der Besonderheit, dass sie Umgebrochen wird, bevor horizontal gescrollt werden muss.
Das Problem: In der Druckvorschau werden teilweise Tabellen am Seitenende abgeschnitten und auf die nächste Seite versetzt, wobei sie sich untereinander verschieben und einen chaotischen Eindruck hinterlassen. Ich hatte vorher float:left anstatt display:inline versucht, aber dabei wird nur die erste Seite angezeigt und danach abgeschnitten obwohl es eigentlich vier sind.

Wodurch kann ich verhindern, dass einige Tabellen auseinandergerissen werden? Entweder sollen alle Tabellen in der letzten Zeile oder gar keine auseinandergerissen werden. Ich habe auch schon eine CSS-Eigenschaft avoid-irgendwas versucht, aber das wird anscheinend nicht unterstützt.

Btw: Die Seite wird in einem Programm eingebunden sein und nicht öffentlich über das Internet erreichbar sein. Deshalb braucht wirklich nur der Internet Explorer 6 das zu verstehen, alles andere ist in diesem Fall egal.

Vielen Dank,
dartrax

  1. Hi,

    wirklich lustig, was der IE alles anzeigt.

    Ich hatte vorher float:left anstatt display:inline versucht, aber dabei wird nur die erste Seite angezeigt und danach abgeschnitten obwohl es eigentlich vier sind.

    Trotzdem würde ich bei diesem Ansatz bleiben. Das Problem mit dem Ausdruck könnten dabei leere Elemente mit clear lösen.

    freundliche Grüße
    Ingo

    1. Hallo!

      Trotzdem würde ich bei diesem Ansatz bleiben. Das Problem mit dem Ausdruck könnten dabei leere Elemente mit clear lösen.

      Ich habe jetzt nach jeder Tabelle eingefügt <span id="span">i</span>, im IE sieht man auch die "i"s unten rechts an jeder Tabelle. Die Druckvorschau sieht nun genau so aus wie mit display:inline bei den Tabellen. Der clear-Tag scheint bei den span-Elementen in diesem Zusammenhang keine Wirkung zu haben.

      Ich habe es erneut hochgeladen, Ihr könnt wieder unter
      http://dartrax.da.funpic.de/page%200.htm
      mit clear usw. experimentieren. Es müsste reichen, wenn wir es hinbekommen, dass die letzte Zeile von Tabellen eines jeden Blattes nicht nach der zweiten Tabelle verrutscht und dadurch das folgende Blatt verhunzt.

      Vielen Dank,
      dartrax

      1. Hallo!

        Ich habe es nochmal mit div statt span versucht. Die letzten Tabellenzeilen einer Druckvorschau-Seite sind nun gleichmäßig. Allerdings wird nun (z. B. auf Seite 2) die dritte Tabellenzeile abgeschnitten, die vierte begonnen, auf der Folgeseite zuerst die dritte fortgesetzt und dann die vierte fortgesetzt. Direkt nach der vierten kommt der folgende Block, aber vollständig, so dass die Höhen nicht mehr übereinstimmen. Zum Glück wird mit den nächsten Blöcken in einer neuen Zeile begonnen, so dass diese nicht so zerissen werden wie vorher.

        Auch wenn es jetzt anders klingt, so ist es schon mal besser als vorher. Trotzdem nicht perfekt...

        dartrax

        1. Hi,

          Du verwendest die IDs unzulässig mehrfach - nehme Klassen.
          Außerdem sehe ich bei den DIVs kein clear. @meda screen könntest Du den DIVs auch display:none zuweisen und @media print könntest Du noch page-break-after nutzen.

          freundliche Grüße
          Ingo

          1. Hi,

            Du verwendest die IDs unzulässig mehrfach - nehme Klassen.
            Außerdem sehe ich bei den DIVs kein clear. @meda screen könntest Du den DIVs auch display:none zuweisen und @media print könntest Du noch page-break-after nutzen.

            freundliche Grüße
            Ingo

            Hallo,
            bitte probiere doch aus, was und wie du es meinst, du hast davon mehr Ahnung als ich. Ich habe bei den divs bereits clear ausprobiert, das hat keine besondere Wirkung. Du kannst zum Testen einfach hinter #d deine CSS-Attribute einfügen. Page-break-after hat bei mir zu keinem nennenswerten Erfolg geführt, es ist aber einfacher, wenn du es selbst kurz probierst anstatt alle Möglichkeiten und ihre Ergebnisse hier aufzulisten.

            Danke für den Tipp mit div { display: none }, beim skalieren des Browserfensters wirkt die Anzeige dadurch flüssiger.

            dartrax

            1. Hi,

              bitte probiere doch aus, was und wie du es meinst, du hast davon mehr Ahnung als ich. Ich habe bei den divs bereits clear ausprobiert, das hat keine besondere Wirkung.

              na gut... ausnahmsweise, bevor ich hier noch längere Erklärungen geben muß. ;-)

              Ersetze alle IDs durch Klassen. Definiere dann für class="d":
                  .d { display:none; }
                  @media print {
                    .d {display:block; clear:left; page-break-after:always;}
                  }

              und vor allem lösche die meisten DIVs raus. Das erste DIV wird erst hier erfordrlich:
                  </table><div class="d"></div>
                  <table class="t">
                    <tr><td class="h">Physik</td></tr>

              wobei Du Dir eigentlich die Klasse "h" sparen könntest, wenn Du sinnvoller <th> verwendest...

              freundliche Grüße
              Ingo

              1. Hallo!

                Ich weiß deinen Einsatz ja zu schätzen und Dank dir auch für dein Beispiel. Aber ob ich jetzt IDs oder Klassen verwende löst nicht mein Problem! *ganzlieblächel*
                Viel wichtiger wäre es mir, wenn du ausprobierst was du mit "leere Elemente mit clear" meinst. Ich habe nun die divs als leere Elemente eingefügt, auch versucht mit clear zu arbeiten aber keinen Erfolg gehabt.

                und vor allem lösche die meisten DIVs raus. Das erste DIV wird erst hier erfordrlich:
                    </table><div class="d"></div>
                    <table class="t">
                      <tr><td class="h">Physik</td></tr>

                Ich weiß nicht, warum gerade da ein DIV erforderlich ist, ich kann mir nur vorstellen, dass bei dir dort irgendwo ein "Tabellenumbruch" stattgefunden hat. Wenn es so war, siehst Du vielleicht selbst den Fehler in deinem Gedankengang:

                Die Tabelle wird von einem Programm erstellt, angezeigt, ausgedruckt usw. Das Programm schreibt auch den HTML-Code selbst. Es ist vorher unbekannt, wie viele, wie breite und wie hohe Tabellenspalten erstellt werden müssen. Daraus lässt sich logisch folgern, dass jede Tabelle von der Struktur her genau so wie alle anderen sein muss, damit sie universell genug ist, um an jeder Stelle stehen zu können.

                dartrax

                1. Hi,

                  Aber ob ich jetzt IDs oder Klassen verwende löst nicht mein Problem! *ganzlieblächel*

                  verhindert aber möglicherweise unerwünschte Nebeneffekte.

                  Viel wichtiger wäre es mir, wenn du ausprobierst was du mit "leere Elemente mit clear" meinst. Ich habe nun die divs als leere Elemente eingefügt, auch versucht mit clear zu arbeiten aber keinen Erfolg gehabt.

                  Das hatte ich bereis - an Deiner Beispielseite mit den DIVs hinter jeder Tabelle. Und hier wie gesagt die Ids durch Klassen ersetzt und die DIVs bis vor "Physik" rausgenommen.

                  Ich weiß nicht, warum gerade da ein DIV erforderlich ist,

                  Im Firefox getestet - eine weitere Spalte hätte hier nicht mehr auf die Druckseite gepaßt. In anderen Browsern und/oder bei anderen Randeinstellungen sieht's vielleicht anders aus.

                  Die Tabelle wird von einem Programm erstellt, angezeigt, ausgedruckt usw. Das Programm schreibt auch den HTML-Code selbst. Es ist vorher unbekannt, wie viele, wie breite und wie hohe Tabellenspalten erstellt werden müssen.

                  nö. Dem Programm ist das schon bekannt. Das müßte lediglich mit etwas zusätzlicher Programmlogik ausgestattet werden, so daß es berechnet, wieviele Spalten nebeneinander auf ein DIN-A-4-Blatt passen und wieviele Tabellen untereinander. Dann kann es auch an den richtigen Stellen ein DIV setzen und so für einen Seitenvorschub sorgen und alles paßt wunderbar. Wenn Du das sogar auf einen bestimmten Browser beschränken kannst, sollte das besonders leicht hinzubekommen sein.

                  freundliche Grüße
                  Ingo

                  1. Hallo!

                    nö. Dem Programm ist das schon bekannt. Das müßte lediglich mit etwas zusätzlicher Programmlogik ausgestattet werden, so daß es berechnet, wieviele Spalten nebeneinander auf ein DIN-A-4-Blatt passen und wieviele Tabellen untereinander. Dann kann es auch an den richtigen Stellen ein DIV setzen und so für einen Seitenvorschub sorgen und alles paßt wunderbar. Wenn Du das sogar auf einen bestimmten Browser beschränken kannst, sollte das besonders leicht hinzubekommen sein.

                    Stimmt. Inzwischen verfügt dieses Programm auch über diese Logik. Ein kleines Problem hat es noch: Es weiß vorher nicht, ob der Anwender Hochformat oder Querformat drucken möchte. Aber das lässt sich bestimmt auch noch hinbekommen...

                    Vielen Dank,
                    dartrax

                    1. Hi,

                      Ein kleines Problem hat es noch: Es weiß vorher nicht, ob der Anwender Hochformat oder Querformat drucken möchte. Aber das lässt sich bestimmt auch noch hinbekommen...

                      das wird das Programm wohl den Anwender fragen müssen - bzw. bei keiner expliziten Angabe Hochformat annehmen müssen.

                      freundliche Grüße
                      Ingo

                      1. Hallo!

                        das wird das Programm wohl den Anwender fragen müssen - bzw. bei keiner expliziten Angabe Hochformat annehmen müssen.

                        So genehmigt? (siehe wieder: http://dartrax.da.funpic.de/page%200.htm)

                        Leider geht das etwas langsamer als so schön "dynamisch" beim skalieren des Browserfensters... Dabei ist der Ausdruck perfekt.

                        Kennst du dich auch mit JavaScript aus und hast du eine Idee wie ich das schneller machen könnte? Du kannst dich ganz auf den IE spezialisieren... Wenn nicht, mache ich unter Java noch mal einen neuen Thread.

                        dartrax

                        1. Hi,

                          So genehmigt? (siehe wieder: http://dartrax.da.funpic.de/page%200.htm)

                          fast. Klappt leider nur im IE und hier passen die Seitenumbrüche noch nicht.

                          Kennst du dich auch mit JavaScript aus und hast du eine Idee wie ich das schneller machen könnte? Du kannst dich ganz auf den IE spezialisieren... Wenn nicht, mache ich unter Java noch mal einen neuen Thread.

                          Bitte nicht. Erstens solltest Du keine neuen Threads für das gleiche Problem nur unter unsterschiedlichem Aspekt aufmachen und zweitens hat Java damit nun wirklich nichts zu tun. ;-)
                          Aber ich kann es Dir ja mal erleichtern und den Themenbereich wechseln...

                          Ich würde es ganz anders machen. Keine Tabellen generieren, sondern nach _jeder_ Einzeltabelle ein leeres DIV mit display:none einsetzen und dann vom Script für die entsprechenden DIVs display:block;clear;left setzen sowie an den Stellen, bei denen ein Seitenvorschub erforderlich ist, noch zusätzlich page-break-after.

                          freundliche Grüße
                          Ingo

                  2. Sorry, internal error (E_FO_502), cannot do anything. Perhaps you should kick your system administrator.

                    1. Sorry, internal error (E_FO_502), cannot do anything. Perhaps you should kick your system administrator.

                      Häh? Nach 'n paar Fehlerpages kam das hier beim Antworten... Irgendetwas ist da schief gelaufen.

                      dartrax