CSS Anpassung, Fehler

mm250787

Grünschnabel
Guten Abend,

ich habe ein kleines Problem. Wenn ich ehrlich bin, dann habe ich nur die Grundlegenden Erfahrungen im CSS/CSS3 Bereich, was durchaus meine missliche Lage erklärt, die ich gerade durchlebe.

Ich habe für meine Kunden ein Rechnungssystem, worin ich Rechnungen drucken möchte. Soweit alles gut. Beim Aufrufen der Rechnung sitzt alles an seinem Platz. Das Problem fängt beim drucken an. Sobald ich bei Google Chrome etwas drucken möchte (STRG+P) dann verschiebt sich alles, bis auf's "Letzte".

Kann mir einer sagen, worin der Fehler liegt? Habe euch mal Screenshots angehangen.

Mein CSS Code lautet:
Code:
body {
    margin: 0;
    padding: 0;
    background-color: #fafafa;
    font: 12px 'Tahoma';
  }

  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  hr {
    border: 1px solid #000000;
  }

/*
  *
  *
  *
  *
  */
  .Page {
    width: 21cm; /* Din A4 format 21.00cm (width) */
    min-height: 29.7cm; /* Din A4 format 27.70 cm (height) */
    padding: 1cm; /* rand left/right */
    position: relative;
    margin: 1cm auto;
    border: 1px #d2d2d2 solid;
    border-radius: 0px;
    background: white;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
  }

  @Page {
    size: A4;
    margin: 0;
    position: relative;
  }

  @media print {
    .Page {
      margin: 0;
      border: initial;
      border-radius: initial;
      width: initial;
      position: relative;
      min-height: initial;
      box-shadow: initial;
      background: initial;
      page-break-after: always;
    }
  }

  /*
  *
  * Tables, menu and navigations
  *
  *
  */
  .table_hover_0 {
    background-color: white !important;
  }

  .table_hover_1 {
    background-color: #f2f2f2 !important;
  }

  .table_hover_2 {
    background-color: #e8e8e8 !important;
  }

/*
  *
  *
  * Elements
  *
  */
  #d1, #Companlogo, #d3, #d4, #d5, #d6, #d7, #d8, #d9, #d10, #d11, #d12, #d13, #d14, #d15, #d16, #d17, #d18, #d19, #d20, #d21 {
    margin-top:1px;
  }

  #d1 {
    float: left;
    width: 380px;
  }

  #SubRight {
    width: 220px;
    float: right;
  }

  #SubLeft {
    width: 320px;
    float: left;
  }

  #Companlogo {
    height: 110px;
    width: 220px;
    float: right;
  }

  #d17 {
    font: 12px 'Tahoma';
  }

  #d3, #d10, #d15, #d16, #d17, #d18, #d19, #d20, #d21, #d22 {
    margin-top: 35px;
  }

  #d15 {
    font: 20px bold 'Arial';
    #text-transform: uppercase;
  }

  #d19 {
    width: 33%;
    float: left;
    margin-right: 4px;
  }

  #d20 {
    width: 33%;
    float: left;
  }

  #d21 {
    width: 33%;
    float: right;
  }

  #EndPrice {
    border-bottom: black double;
    font: 15px 'Arial';
    font-weight: bold;
  }

/*
  *
  *
  * images
  *
  */
  img {
    background-size: cover;
  }

  .clear {
    border: none;
    clear: both;
  }

  /*
   *
   *
   * Tables
   *
   */
  table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    padding: 0;
    font-size: 11px;
  }

  th {
    text-align: left;
    border-bottom: 2px solid black;
  }

/*
  *
  *
  * Footer
  *
  */
  .footer {
    width: 100%;
    position: absolute;
    bottom: 2px;
  }

  @media print {
    .footer {
      position: fixed;
      bottom: 5;
    }
  }
 

Anhänge

  • 1_1.png
    1_1.png
    90,8 KB · Aufrufe: 13
  • 2_2.png
    2_2.png
    11,9 KB · Aufrufe: 12
Oh, habe ich ganz vergessen. Hier die HTML Datei:

Code:
<!DOCTYPE html>
  <html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Kundennummer - K-2014-08</title>
    <!--<base href="http://ams.webrcon.org/" target="_self">--><base href="." target="_self">
    <link rel="stylesheet" type="text/css" href="./images/style.acc.css">
      <style type="text/css"></style></head>
      <body>
      <div class="nojs"></div>
      <div class="PageBook">
        <div class="Page">
          <!-- Compan address -->
              <div id="d1">www.domain.de - Max Mustermann - Musterweg 10 - 12345 Berlin - Deutschland</div>
          <!-- Logo-->
          <div id="Companlogo">
            <img src="./images/mainlogo.png" width="220" height="120" border="0">
          </div>
          <!-- Clear -->
              <div class="clear"></div>
          <!-- Compan -->
              <div id="SubRight">           
                <div id="d3"><u>Rechnungsnummer</u>: R-2014-00</div>
            <div id="d4"><u>Rechnungsdatum</u>: 12.10.2014</div>
            <div id="d5">&nbsp;</div>
            <div id="d6"><u>Kundennummer</u>: K-2014-00</div>
            <div id="d7"><u>Bewertungen</u>: a.domain.de</div>
                <div id="d8"><u>Benutzerpin</u>: 123456</div>
              </div>
          <!-- Customer -->
              <div id="SubLeft">
                <div id="d10">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <small>www.domain.de - Musterweg 10 - 12345 Berlin</small><br><br></div>
                <div id="d11">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              Fam. Max Mustermann
            </div>
                <div id="d12">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              Musterweg 10
            </div>
              <div id="d13">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              12345 Musterthal
            </div>
                <div id="d14">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              Musterland
            </div>
              </div>
          <!-- Clear -->
              <div class="clear"></div>
          <!-- accountinfo -->
            <div id="d15">Rechnung <u>R-2014-00</u> - Datum: <u>12.10.2014</u></div>
          <!-- Table -->
              <div id="d16">
                <table border="0">
              <tbody>
                <tr>
                  <th style="width:5%">Pos.</th>
                  <th style="width:10%">Art. Nr.</th>
                  <th style="width:40%">Beschreibung</th>
                  <th style="width:10%;">Menge</th>
                  <th style="width:10%">Einzelpreis</th>
                  <th style="width:10%">MwSt.</th>
                  <th style="width:15%">Gesamtpreis</th>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr height="25px">
                  <td class="table_hover_0">1</td>
                  <td class="table_hover_0">A12345678</td>
                  <td class="table_hover_0">Musterbechreibung 1</td>
                  <td class="table_hover_0">2</td>
                    <td class="table_hover_0">&euro; 3.00</td>
                    <td class="table_hover_0">&euro; 1.14</td>
                  <td class="table_hover_0">&euro; 6.00</td>
                </tr>
                <tr>
                  <th colspan="7"></th>
                </tr>
                <!-- Endprice -->
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&euro; 103.95</td>
                  <td>&euro; 151.22</td>
                  <td>&euro; 795.90</td>
                </tr>
                <!-- Endprice -->
                <tr height="50px">
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>
                    <div id="EndPrice">Gesamtsumme inkl. 19.00% MwSt:</div>
                  </td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>
                    <div id="EndPrice" align="left">&euro; 795.90</div>
                  </td>
                </tr>
              </tbody>
            </table>
             </div>
          <!-- Endtext -->
          <div id="d17">
            <u>Zahlungsbedingungen</u>: Dieser Gesamtbetrag dieser Rechnung ist zahlbar innerhalb von 7 Tagen ohne Abzug.
            <u>Zusatzvereinbarungen</u>: Musterhinweise könnten hier stehen
          </div>
          <div id="d18">-</div>
          <!-- Footer -->
            <div class="footer">
              <div id="d19">
              <u>Firmeninhaber</u>:<br>
              Max Mustermann
              <br><br><u>Steuernummer</u>:<br>36/511/68397
            </div>
              <div id="d20">
              <u>Firmensitz</u>:<br>
              Musterweg 10<br>
              12345 Berlin<br>
              E-Mail info@domain.de<br>
              Funk 01234567890
            </div>
              <div id="d21">
              <u>Bankverbindung</u>:<br>
              Berliner Bank<br>
              Konto 123456789<br>
              Bankleitzahl 100000000<br>
              IBAN DE12345678900100000000<br>
              BIC BELADEBEXXX
            </div>
            </div>
        </div>
      </div>
    <style type="text/css">embed[type*="application/x-shockwave-flash"],embed[src*=".swf"],object[type*="application/x-shockwave-flash"],object[codetype*="application/x-shockwave-flash"],object[src*=".swf"],object[codebase*="swflash.cab"],object[classid*="D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid*="d27cdb6e-ae6d-11cf-96b8-444553540000"],object[classid*="D27CDB6E-AE6D-11cf-96B8-444553540000"]{    display: none !important;}</style>
  </body>
</html>
 
Hallo,
was ich auf anhieb sehe ist das der Footer absolut bzw. fixed positioniert ist. Das könnte schonmal das krasse verrutschen des Footers erklären. Ansonsten schließe ich mich Spicelab an.

Grüße
 
Da ich nur im Footer-Bereich eine eklatante Abweichung erkenne, habe ich das betroffene CSS mal folgendermaßen korrigiert:
CSS:
#d19 {
  width: 33%;
  /*float: left;*/ /* deaktiviert */
  margin-right: 4px;
  display:table-cell /* Das Element steht für eine Tabellenzelle */
  }
  #d20 {
  width: 33%;
  /*float: left;*/ /* deaktiviert */
  display:table-cell /* Das Element steht für eine Tabellenzelle */
  }
  #d21 {
  width: 33%;
  /*float: right;*/ /* deaktiviert */
  display:table-cell /* Das Element steht für eine Tabellenzelle */
  }

...

  .footer {
  width: 100%;
  position: absolute;
  bottom: 2px;
  display:table /* Das Element enthält tabellarisch angeordnete Kindelemente */
  }
  @media print {
  .footer {
  position: fixed;
  bottom: 5px /* hier fehlte die Angabe zur Einheit */
  }
  }
Was den abweichenden Textfluß von "Zahlungsbedingungen" und "Zusatzvereinbarungen" betrifft, würde das <p>-Element Abhilfe schaffen:
HTML:
<div id="d17">
  <p><u>Zahlungsbedingungen</u>: ...</p>
  <p><u>Zusatzvereinbarungen</u>: ... </p>
</div>
 
@SpiceLab Vielen vielen vielen dank! Genauso, habe ich mir das vorgestellt. Vielen vielen dank! Javascript, PHP alles kein Problem für mich, aber CSS ist schon eine Sache für sich.
 
Ich denke ich muss mich wohl oder übel doch mal mit CSS mehr beschäftigen, als mit den anderen Sachen. Kennst du gute einfache Tutorials im CSS Bereich?

Ich muss im übrigen zugeben, das ich mich mehr mit PHP beschäftigt habe, als das andere. Denn meine Firma sollte mal unabhängig sein, als vom WIndows Rechnungsprogramm. Nun habe ich mir eins in PHP selber geschrieben, da von meinen zukünftigen Filialen besser zu erreichen ist.
 
Zurück