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:
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;
}
}