Tutorialwelt.de » Internet Explorer http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 IT Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll http://www.tutorialwelt.de/475/it-sicherheit-internet-explorer-und-die-aurora-attacke-per-mshtml-dll.htm http://www.tutorialwelt.de/475/it-sicherheit-internet-explorer-und-die-aurora-attacke-per-mshtml-dll.htm#comments Thu, 21 Jan 2010 14:19:29 +0000 admin http://www.tutorialwelt.de/?p=475
  • WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
  • Windows und die wohl brisanteste Sicherheitslücke seit langem Tavis Ormandy ein Sicherheitsexprete von Google hat nun eine der...
  • Cookies von Iframes im Internet Explorer ...Hierbei geht es um den Umgang mit Cookies von Drittanbietern....
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     IT-Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll

    Heute mal ein ganz anderes Thema:

    Der Internet Explorer und die Aurora Attacke.
    Das BSI – die Bundesbehörde für Sicherheit hat eine gefährliche Lücke im Internet Explorer festgestellt. Hierbei wird die mshtml.dll angegriffen. Ein Schadhafter Code (ein sogenannter Javascript Exploit) wird auf Internet Seiten gesetzt. Teilweise wird auch Google missbraucht, User auf diese Seiten zu bringen. Sobald ein User eine solche Seite öffnet, erhält der Hacker eine Meldung und schon kann er richtig aktiv werden. Er erhält, ohne das Wissen des Users, Zugriff auf dessen Rechner und kann dort nach Belieben wüten. Er kann Dateien löschen etc.

    Ein Video dazu habe ich diesem Artikel beigefügt. Hier kann man genau sehen, was passiert:
    Es wird auf einer Webseite der schadhafte Code eingefügt.

    Die Seite wird geöffnet und links erscheint sofort die Meldung über einen offenen Rechner.

    Das “wichtige Dokument” wird gekillt.

    Der “Aurora” IE Exploit in Aktion – ein größeres Video von The Crew of Praetorian Prefect on Vimeo.

    Den schadhaften Code werde ich hier nicht posten, da ich nicht möchte, daß das Ganze weiter verbreitet wird.

    Ich kann derzeit nur jedem raten, den Internet Explorer bis zum offiziellen Update von Microsoft zu meiden.Angeblich soll die 8er Version sicher sein. Aber darauf würde ich mich nicht verlassen.

    Related posts:

    1. WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
    2. Windows und die wohl brisanteste Sicherheitslücke seit langem Tavis Ormandy ein Sicherheitsexprete von Google hat nun eine der...
    3. Cookies von Iframes im Internet Explorer ...Hierbei geht es um den Umgang mit Cookies von Drittanbietern....

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/475/it-sicherheit-internet-explorer-und-die-aurora-attacke-per-mshtml-dll.htm/feed 3     HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm#comments Sun, 18 Oct 2009 10:00:43 +0000 admin http://www.tutorialwelt.de/?p=377
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
  • Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  • Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Fortsetzung Tutorial
    HTML Tabellen tbody scrollen und korrekt ausdrucken

    In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme:
    Opera hat bei dem Einsatz von table-row-group in der ersten Zeile der zweiten Seite nur der Inhalt der ersten Zelle angezeigt.
    Opera und Firefox haben den Inhalt aller drei Spalten in die erste gesetzt.

    Um den Fehler des Opera Browsers in der ersten Zeile der zweiten Seite in den Griff zu bekommen, müssen wir
    display: table-row-group; mit display:block; ersetzen:

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}

    Und schon ist das Ergebnis besser:

    Screenshot Opera:

    tbody Tabelle Seitenumbruch im Opera ausgedruckt

    tbody Tabelle Seitenumbruch im Opera ausgedruckt

    Das gleiche Ergebnis liefert uns nun der Firefox Browser:

    Screenshot Firefox:

    Ausdruck im Firefox mit table-row-group

    Ausdruck im Firefox mit table-row-group

    Screenshot Firefox:

    Ausdruck Seitenumbruch im Firefox table-row-group

    Ausdruck Seitenumbruch im Firefox table-row-group

    Diese Stauchung gibt es nun im Internet Explorer nicht:

    Screenshot Internet Explorer:

    Ausdruck im Internet Explorer mit table-row-group

    Ausdruck im Internet Explorer mit table-row-group

    Screenshot Internet Explorer:

    Ausdruck Seitenumbruch im Internet Explorer table-row-group

    Ausdruck Seitenumbruch im Internet Explorer table-row-group

    Der Fehler beim Seitenumbruch besteht allerdings immer noch.
    Der Unterschied zwischen Internet Explorer und Opera/Firefox besteht darin, daß die Browser bei der Berechnung der Breite von unterschiedlichen Grundwerten ausgehen. Opera und Firefox setzen die table-row-group in die erste Spalte der Tabelle und verbreitern somit die komplette erste Spalte, während sie die letzten beiden stauchen. Der Internet Explorer würde von der Header Zeile ausgehen und nicht vom Body.

    Zu dem Firefox/Opera Problem der Stauchung gibt es eine Lösung. Man fügt eine weitere kleine Tabelle in die erste th Zelle des thead Bereiches ein. In dieser Tabelle sind nun die eigentlichen drei thead Werte vorhanden:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th><table><tr><td class="z1">Überschrift 1</td><td class="z1">Überschrift 2</td><td class="z1">Überschrift 3</td></tr></table></th>
     <th>&nbsp;</th>
     <th>&nbsp;</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th><table><tr><td class="z1">Fußnote 1</td><td class="z1">Fußnote 2</td><td class="z1">Fußnote 3</td></tr></table></th>
     <th>&nbsp;</th>
     <th>&nbsp;</th>
    </tr>
   </tfoot>
   <tbody>
           <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            ........
            ........
            ........
    </tbody>
   </table>

  </body>
 </html>

    Ich habe zur einfacheren Zuordnung den Zellen der verschachtelten Tabelle die Klasse z1 zugeordnet.

    In der print.css müssen wir noch der Klasse css den Wert font-weight: bold; und width: 220px; zuordnen.

    Die print.css sähe dann folgendermaßen aus:

    Beispielcode print.css:

      #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}
  .z1 {font-weight: bold; width: 220px;}

    Nun sieht das Ganze im Firefox folgendermaßen aus:

    Screenshot Firefox:

    tbody Tabelle im Firefox ausgedruckt

    tbody Tabelle im Firefox ausgedruckt

    Und der Seitenumbruch sieht auch perfekt aus:
    Screenshot Firefox:

    tbody Tabelle Seitenumbruch im Firefox ausgedruckt

    tbody Tabelle Seitenumbruch im Firefox ausgedruckt

    Jetzt schauen wir uns das Ergebnis im Opera an:

    Screenshot Opera:

    tbody Tabellen Ausdruck im Opera

    tbody Tabellen Ausdruck im Opera

    Und beim Seitenumbruch:

    Screenshot Opera:

    tbody Tabellen Ausdruck Seitenumbruch im Opera

    tbody Tabellen Ausdruck Seitenumbruch im Opera

    Das Tabellenende ist nun korrekt berechnet worden. Die Spalten sind auf die richtige Breite gebracht. Hier passt nun alles.

    Doch nun kommt noch einmal der Internet Explorer an die Reihe. Diesmal zickt der IE:

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Beim Seitenumbruch stimmt das Ganze auch nicht:

    Screenshot Internet Explorer:

    tbody Tabelle Seitenumbruch im Internet Explorer ausgedruckt

    tbody Tabelle Seitenumbruch im Internet Explorer ausgedruckt

    In der vorherigen Version stimmte die Anzeige des Internet Explorers, aber nicht die von Opera und Firefox.
    Jetzt ist es umgekehrt. Stehen wir nun vor einem unlösbaren Problem? NEIN!
    Wir werden nun eine Abfrage einführen. Wenn der Internet Explorer verwendet wird, soll die verschachtelte Tabelle nicht zum Einsatz kommen.

    Zuletzt ist mir noch aufgefallen, daß bei Opera bei thead und tfoot die Einträge nicht zentriert wurden, wie bei den anderen Browsern. Also werden wir in der CSS die z1 Klasse noch um ein text-align: center; erweitern.

    Beispielcode print.css:

      #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}
  .z1 {font-weight: bold; width: 220px; text-align: center;}

    Um den Internet Explorer abzufragen verwenden wir folgendes Javascript:
    if (navigator.appName==”Microsoft Internet Explorer”) {

    Unsere HTML Datei sähe dann folgendermaßen aus:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 1")} else {document.write("<table><tr><td class='z1'>Überschrift 1</td><td class='z2'>Überschrift 2</td><td class='z3'>Überschrift 3</td></tr></table>");}</script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 2")} else {document.write("&nbsp;");} </script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 3")} else {document.write("&nbsp;");} </script></th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 1")} else {document.write("<table><tr><td class='z1'>Fußnote 1</td><td class='z2'>Fußnote 2</td><td class='z3'>Fußnote 3</td></tr></table>");}</script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 2")} else {document.write("&nbsp;");} </script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 3")} else {document.write("&nbsp;");} </script></th>
    </tr>
   </tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
........
........
........
</tbody>
</table>

</body>
</html>

    Wir schauen uns nun gemeinsam noch ein allerletztes Mal die Ergebnisse der unterschiedlichen Browser an.

    Um es gleich vorweg zu nehmen. Dem Internet Explorer wird man den korrekten Seitenumbruch nicht beibringen können. Auch ein page-break-after bzw. page-break-before ist hier sinnlos. Der Internet Explorer schafft es einfach nicht.

    Screenshot Firefox:

    tbody Tabelle in Firefox ausgedruckt

    tbody Tabelle in Firefox ausgedruckt

    Screenshot Firefox:

    tbody Tabelle mit Seitenumbruch in Firefox ausgedruckt

    tbody Tabelle mit Seitenumbruch in Firefox ausgedruckt

    Im Opera sieht es nun ebenfalls annehmbar aus:

    Screenshot Opera:

    tbody Tabellen Ausdruck im Opera Browser

    tbody Tabellen Ausdruck im Opera Browser

    Screenshot Opera:

    tbody Tabelle - Seitenwechsel ausgedruckt im Opera

    tbody Tabelle - Seitenwechsel ausgedruckt im Opera

    Auch wenn es uns nun nicht gelungen ist, dem Opera Browser es beizubringen, daß thead und tfoot auf jeder Seite wiederholt werden sollten, haben wir ein ansehnliches Ergebnis erreicht. Das Ende der Tabelle wir nun auch richtig berechnet und nicht mitten in die Tabelle gesetzt.

    Abschließend betrachten wir noch das Ergebnis im Internet Explorer. Hier ist leider nichts mehr zu machen.
    Der Fehler beim Seitenübergang ist nicht in den Griff zu bekommen. Angeblich soll Microsoft einen Patch für den Internet Explorer haben. Gefunden habe ich dazu allerdings leider nichts.

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Screenshot Internet Explorer:

    tbody Tabelle Seitenwechsel im Internet Explorer ausgedruckt

    tbody Tabelle Seitenwechsel im Internet Explorer ausgedruckt

    Für dieses Tutorial sind so manche Kopfhaare ergraut. Ich glaube hier kann man überdeutlich sehen, wie komplex Internet Seiten Entwicklung sein kann, da es manchmal kein Patentrezept gibt und einem die Entwickler der Browser auch die eine oder andere Stolperfalle vor die Füsse werfen. Schade eigentlich. Es soll doch ein einheitlicher Standard geschaffen werden?! Davon sind wir noch meilenweit entfernt. Inzwischen startet CSS mit der dritten Generation. Befehle a la page-break-after sollten seit CSS 2.1 Standard sein. Obwohl man die aktuellsten Broser verwendet, kommt man bei so simplen Dingen wie dem Ausdrucken einer Tabelle ins straucheln.

    Trotz allem sind wir mit dem Entwickeln von Tabellen noch nicht fertig. Hierzu werden noch ein paar Tutorials folgen.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm/feed 0     HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm#comments Sat, 17 Oct 2009 04:29:40 +0000 admin http://www.tutorialwelt.de/?p=319 Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich. Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht.... Related posts:
    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     HTML Tabellen tbody scrollen und korrekt ausdrucken

    Im letzten Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich.

    Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht. Das Ergebnis sieht folgendermaßen aus:

    Screenshot Firefox:

    Tbody Tabelle Ausdruck 1 im Firefox

    Tbody Tabelle Ausdruck 1 im Firefox

    Screenshot Opera:

    Tbody Tabelle Ausdruck 1 im Opera

    Tbody Tabelle Ausdruck 1 im Opera

    Screenshot Internet Explorer:

    Tbody Tabelle Ausdruck 1 im Internet Explorer

    Tbody Tabelle Ausdruck 1 im Internet Explorer

    Das ist nicht unser Ziel. Wir wollen den Besuchern schließlich auch den Ausdruck unserer Informationen ermöglichen. Dieses Tutorial ist eines der umfassendsten zu diesem Thema im Web. Ihr werdet Euch wundern, wie komplex es sein kann, für die drei großen Browser ein annehmbares Ergebnis hinzubekommen. Hierzu werden wir CSS und Javascript einsetzen müssen. Doch dazu später mehr.

    Diesmal werden wir den CSS Code in externe Dateien auslagern.
    Wir werden eine CSS Datei für die normale Ansicht im Browser erstellen und eine weitere CSS-Datei für den Drucker. Für die Anzeige im Browser verwenden wir wieder die Tabelle aus dem vorangegangenen Tutorial.

    Wir nehmen zuerst die Tabelle aus dem vorangegangenen Tabellen-Tutorial als Grundlage.

    Wir kopieren den CSS Code und fügen ihn in eine CSS Datei ein:

    Beispielcode screen.css:

      #screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

    Diese screen.css binden wir per link rel in unsere HTML-Datei ein. Von @import ist abzuraten (siehe folgendes Tutorial: CSS-Tutorial Einbindung per link rel oder @import)

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Ich habe nun absichtlich noch viele weitere Zeilen eingefügt. Wir wollen scrollen… Nicht nur am Monitor, sondern auch beim Ausdruck.

    Wir hängen nun folgende Tabelle an die bereits bestehende mit an:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>

  <table id="printtab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
    </tr>
    </tbody>
   </table>

  </body>
 </html>

    Zu der zweiten Tabelle müssen wir ebenfalls eine CSS erstellen:

    Beispielcode print.css:

     #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      width:100%;
      height: 400px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  th+th+th {width:34%;}
  td+td {width:34%;}

    In der print.css habe ich nun den Befehl visibility: hidden eingefügt. Dieser Befehl blendet den dazugehörigen Bereich aus. Sobald also die Tabelle ausgedruckt werden soll, wird die print.css geladen und die screenoutertab nicht mehr angezeigt.

    Nun sollten wir das gleiche (im umgekehrten Sinn) für die printoutertab in der screen.css machen:

    Beispielcode screen.css:

    #screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

  #printoutertab {
      visibility: hidden;
      }

    Und diese CSS wieder per link rel einbinden. Ich werde nun die screenouterTab-Tabelle nicht mehr ausführlich im Code anzeigen. Es wird sich an dieser Tabelle nichts mehr im Verlauf des Tutorials ändern. Ebenfalls werde ich den tbody Bereich kürzen. Auch hier wird sich nichts mehr ändern.

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
           <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            ........
            ........
            ........
    </tbody>
   </table>

  </body>
 </html>

    Nun werden wir die ersten Erfahrungen mit den Eigenarten der unterschiedlichen Browser machen.

    Um dieses Tutorial mit möglichst wenig Druckerfarbe und Papier absolvieren zu können, empfehle ich die Druckvoransicht zu wählen oder den PDF Creator zu installieren. Ihr könnt ihn hier herunterladen.
    Mit dem PDF-Creator ist es möglich, Internet Seiten als PDF-Datei abzuspeichern. Das Abspeichern als PDF-Dokument wird über das Druckermenü durchgeführt. Man wählt anstelle des Druckers den PDF Creator aus. Das Ergebnis des Druckers gleicht dem des PDF-Creators.

    Schaut sich man nun das erste Ergebnis in den verschiedenen Browsern an, wird man schnell feststellen, daß das Ergebnis nicht einmal annähernd zufriedenstellend ist.

    Hierzu mal drei Screenshots:

    Screenshot Firefox:

    Tbody Tabellenausdruck im Firefox

    Tbody Tabellenausdruck im Firefox

    Soweit sieht das Ergebnis noch in Ordnung aus. Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 an:

    Screenshot Firefox:

    Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

    Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

    Hier kann man nun schon den ersten Fehler feststellen: Am Ende der ersten Seite wurde der Tfoot Bereich nicht wiederholt. Im Firefox Browser werden wir dies in den Griff bekommen. Im Opera sowie im Internet Explorer wird dies nicht unser einziges Problem sein.

    Schauen wir uns nun die Ergebnisse im Internet Explorer an:

    Screenshot Internet Explorer:

    Tbody Tabellenausdruck im Internet Explorer

    Tbody Tabellenausdruck im Internet Explorer

    Auch hier sieht es zu Beginn noch ganz gut aus.

    Schauen wir uns nun den Übergang zischen Blatt 1 und Blatt 2 an:

    Screenshot Internet Explorer:

    Tbody Tabellenausdruck im Internet Explorer

    Tbody Tabellenausdruck im Internet Explorer

    Auch hier wieder fehlt der Tfoot Bereich auf Seite 1. Doch das ist nicht alles beim Internet Explorer. Auf Seite 2 fehlt der thead Bereich. Und man kann ganz deutlich erkennen, daß der Internet Explorer innerhalb der Zeile den Seitenumbruch gemacht hat. Das ist ein ganz grober unschöner Fehler.

    Zuletzt schauen wir uns das Ergebnis in Opera an:

    Screenshot Opera:

    Tbody Tabellenausdruck in Opera

    Tbody Tabellenausdruck in Opera

    Als erstes fällt einem Betrachter bei diesem Screenshot auf, daß sich die Tabelle (im Vergleich zu Firefox und Internet Explorer) nicht über die komplette Breite der Seite erstreckt. Die Tabelle ist zusammengestaucht.

    Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 im Opera an:

    Screenshot Opera:

    Tbody Tabellenausdruck im Opera

    Tbody Tabellenausdruck im Opera

    Im Opera wird es nun ganz schlimm. Auch hier fehlen wieder der tfoot Bereich am Ende von Seite 1 sowie der thead Bereich am Anfang von Seite 2. Doch das ist nicht alles. Opera ist ohne Hilfe nicht in der Lage, das Ende der Tabelle korrekt zu berrechnen (sobald mindestens ein Seitenwechsel vorhanden ist. Das Ende wird dann von Opera einfach mitten in die Tabelle gesetzt.

    Bei dieser Fülle von Fehlern in den unterschiedlichen Browsern kann man sich überhaut nicht vorstelle, daß man ein einigermaßen akzeptables Ergebnis erzielen kann. Wir werden es versuchen. Es wird nicht perfekt, aber es wird das beste Ergebnis sein, das man erzielen kann.

    Beginnen wir nun mit der Breite der Tabelle in Opera.

    Dazu werden wir nun die print.css abändern.

    Von der printoutertab löschen wir die Breiten und die Höhenangabe width und height.
    Wir löschen ebenfalls die Breitenangabe von th+th+th und td+td.

    Dafür fügen wir folgende Breitenangabe ein:
    #printoutertab tbody td {width: 400px;}
    Hiermit legen wir fest, daß alle td Zellen der printoutertab Tabelle 400 Pixel breit sein sollen.
    Eine breite von 400 Pixeln ist für drei Spalten ein optisch sehr gut aussehendes Ergebnis.

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 400px;}

    Und schon haben wir das erste Problem gelöst.

    Hier die Screenshots:

    Screenshot Opera:

    Tabellenausdruck tbody im Opera

    Tabellenausdruck tbody im Opera

    Der Fehler am Ende der Tabelle besteht allerdings weiterhin:

    Screenshot Opera:

    tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

    tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

    Screenshot Firefox:

    Tbody Tabellenausdruck im Firefox

    Tbody Tabellenausdruck im Firefox

    Und der Übergang von Seite 1 zu Seite 2:

    Screenshot Firefox:

    Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

    Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

    Zu guter letzt wollen wir uns nochmal das Ergebnis im Internet Explorer ansehen:

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Und beim Seitenumbruch haben wir das gleiche Problem wie zuvor:
    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Als nächstes nehmen wir uns das falsch berechnete Ende im Opera Browser vor:
    Wir fügen folgende Codezeile in unsere print.css ein: tbody tr {display: table-row-group;}
    Zur Erklärung: Offiziell heißt es, man könne die bestehenden Probleme mit folgenden drei Zeilen in den Griff bekommen:
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    tbody {display: table-row-group;}

    Diese display-Befehle fassen die Zellen zu einer Gruppe zusammen. Die Probleme wären angeblich damit beseitigt.
    Ich habe sehr lange mit diesen Befehlen herumexperimentiert und kein einziges, alle drei Browser bedienendes Ergebnis erzielen können.

    Habe ich allerdings NUR tbody tr {display: table-row-group;} eingefügt, kam ich meinem Wunschergebnis um einiges näher. Allerdings hat sich hier noch ein Opera Bug mit eingeschlichen, den ich Euch gleich zeigen werde.

    Demzufolge sieht die print.css nun folgendermaßen aus:

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: table-row-group;}

    Ihr werdet gleich erschrecken. Nun sieht das Ganze sehr schlimm aus (und dennoch sind wir auf dem richtigen Weg:

    Screenshot Opera:

    tbody Tabelle mit table-row-group Ausdruck im Opera

    tbody Tabelle mit table-row-group Ausdruck im Opera

    Screenshot Opera:

    tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

    tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

    Jetzt ist das Ende der Tabelle richtig berechnet. Allerdings sind nun alle Zellen des tbody Bereichs in die erste Spalte gesetzt worden. Die erste Spalte wurde sehr breit und die anderen beiden viel zu schmal.
    Schaut Euch mal die erste Zeile der zeiten Seite an. Hier wurde nur der Wert der ersten Zelle ausgegeben. Die beiden anderen Zellen sind leer.

    Diesem Problem gehen wir im nächsten Tutorial auf den Grund.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm/feed 2     Cookies von Iframes im Internet Explorer http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm#comments Fri, 28 Aug 2009 13:06:02 +0000 admin http://www.tutorialwelt.de/?p=174
  • WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
  • IT Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll Der Internet Explorer und die Aurora Attacke. Das BSI -...
  • Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Cookies von Iframes im Internet Explorer

    Ich bin mal wieder über eine Stolperfalle des Internet Explorer gestolpert. Ich installierte einen AJAX-Chat von Blueimp auf einem Server und sollte diesen dann auf einer anderen Seite per iframe anzeigen lassen.

    Dies ist der Chat: Ajax Chat.

    Beim Test des Chats im Internet Explorer erschien die Meldung, daß Cookies benötigt werden. Cookies waren jedoch angeschaltet.

    Eine Recherche ergab, daß die W3C eine Platform for Privacy Preferences kurz P3P erstellt hat.
    Wer es nachlesen möchte findet den originaltext hier: P3P – Platform for Privacy Preferences
    Hierbei geht es um den Umgang mit Cookies von Drittanbietern. Der Internet Explorer behandelt dies anders als Opera, Firefox und alle anderen. Beim Internet Explorer muss man in jede Datei, die mit Cookies arbeitet folgende Header einfügen:

    Beispielcode PHP:

       header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

    Beispielcode ASP.NET:

       HttpContext.Current.Response.AddHeader("p3p","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

    Beispielcode Django:

       response = render_to_response('mytemplate.html')
response["P3P"] = 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

    Beispielcode Django:

       response.addHeader("P3P","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"")

    Für den Ajax-Chat von Blueimp galt es nun diesen Header an einer geeignete Stelle einzufügen. Ich habe dazu gleich die index.php genommen und an folgende Stelle im Code eingefügt:

    Beispielcode Blueimp Ajax Chat index.php:

    // Show all errors:
error_reporting(E_ALL);
//header for iframe cookies in Internet Explorer:
header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

// Path to the chat directory:

    Blueimps Ajax Chat lief nun auch innerhalb eines Iframes im Internet Explorer.

    Related posts:

    1. WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
    2. IT Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll Der Internet Explorer und die Aurora Attacke. Das BSI -...
    3. Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm/feed 0