CSS-Vorgaben für @media print greifen nur teilweise

Mathaetix · 28. März 2016

Guten Abend Allerseits!

Bin neu hier und bezüglich HTML5 & CSS fortgeschrittener Anfänger. Der CSS-Code meines Problemchens:

CSS

@media print {
    nav {
        display: none;
    }




    footer {
        display: none;
    }




    p {
        font-size: 14px;
        color: #000000;
    }




    .bkng {
        font-size: 12px;
    }




    em {
        color: #000000;
    }




    i {
        color: #000000;
    }




    .zitat {
        color: #000000;
    }




    h1 {
        font-size: 20px;
    }




    h2 {
        font-size: 18px;
    }




    h3 {
        font-size: 16px;
    }




    h4 {
        font-size: 14px;
    }




    h5 {
        font-size: 10px;
    }




    dt {
        font-size: 11px;
    }




    dd {
        font-size: 9px;
    }
}
/* Vorgaben für den Papierdruck */

Alles anzeigen

Alles funktioniert und auch der Validater hat nichts gefunden - nur: die Farbumstellung greift nicht. Habe absolut keine Ahnung, was das schief laufen könnte. Ich benutze keine Scripts und die Website funktionert, nur daß die Farben der Elemente >em<, >i< u. >.zitat< in der Druckvorschau nicht überschrieben werden. Mir ist bewußt, daß ich wahrscheinlich >color #000000< zu oft hier eingebaut habe. In der Druckvorschau von Firefox, wie auch Chrome, das gleiche Ergebnis.

Für Eure Hilfe bedanke ich mich schon jetzt recht herzlich!
Mathaetix

Basi · 28. März 2016

Um das Problem ergründen zu können, reicht dein Codeausschnitt leider nicht.

Du kannst versuchen die Farbe zu erzwingen:

CSS

em {
    color: #000000 !important;
}




i {
    color: #000000 !important;
}




.zitat {
    color: #000000 !important;
}

Alles anzeigen

Diese Methode ist aber eher unschön und zeigt finde ich, dass man selbst nicht so richtig versteht was der eigene Code treibt.

Wie sieht denn der Rest aus?

MrMurphy · 28. März 2016

Hallo

Ich kann dein Problem an Hand deiner Angaben nicht nachvollziehen. Du gibst als Schriftfarbe schwarz an und so wird ein Beispieltext auch ausgedruckt.

Quellcodeschnipsel sind in der Regel auch nicht besonders hilfreich. Hast du mal einen Link zu der Seite?

Gruss

MrMurphy

Mathaetix · 29. März 2016

Guten Tag Allerseits!

Erst einmal danke für die Antworten. Habe das Problem mittlerweile selbst lösen können und zwar derart, daß ich die hier gezeigten Mediainformationen (@media print ...) ganz an das Ende des Stylesheets gesetzt habe. Anfänglich habe ich den Block viel weiter oben plaziert. Komisch war nur, daß ich ja sowohl für >nav<, wie auch >footer< die Printinformationen in diesen Block gepackt hatte und diese Informationen wurden sofort übernommen, obgleich die "Screeninfos" erst später kamen. So auch die Schriftgröße für >p<, nur (und hier muß ich mich korrigieren) die Farbinfos und die Überschriften (h1 bis h5) wurden nicht berücksichtigt. Jetzt nach dem Umzug der Mediainfos nach ganz unten, funktioniert plötzlich alles. Sowohl Firefox, wie auch Chrome zeigen in der Druckvorschau alles in schwarz u. auch mit richtig skalierten Überschriften. Das aktuelle, funktionierende, Stylesheet habe ich mit angehängt.

Nochmals vielen Dank!
Gruß & Schluß
Mathaetix

CSS-Vorgaben für @media print greifen nur teilweise

Jetzt mitmachen!

Teilen