Search code examples
htmlcssprintingstyling

CSS styling lost when printing

I have a page which contains charts etc for statistics which must be printable. I want to just use the standard browser print functionality in order to enable printing. I also have css which changes the button colours for selected buttons to make it clear which charts are being viewed. However, my issue is that when i attempt to print the page, this colouring is lost and reset to its default presentation.

I am aware of the capabilities of doing this in Chrome by using webkit-print-color-adjust settings in the CSS, however, the vast majority of users in my business use IE or Edge (as they are microsoft defaults) and therefore i need a solution which would work in them.

I have attempted using !important and @media print but to no effect as yet, unless i am using them wrong.

Here is the css currently:

@media print{
    .btn-primary-chart:active,
    .btn-primary-chart.active {
        color: #ffffff;
        background-color: green !important;
        border-color: #285e8e;
    }
}

Any help would be greatly appreciated :)

Solution

  • There isn't any foolproof method to print backgrounds in Internet Explorer and Microsoft Edge yet. However, there's a few methods I've tried before and may work under some circumstances:

    Method 1 (using sprite):

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffad‌​a', endColorstr='#fffada')";

    Method 2:

    CSS

    .background:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1000px solid #eee;
 }

    HTML

    <body class="background">

    But if you want to print it yourself, you can enable 'Print Background Color':

    To resolve this behavior, turn on the Print background colors and images option in Internet Explorer. To do this, follow these steps:

    1. On the Tools menu, click Internet Options, and then click the Advanced tab.

    2. In the Settings box, under Printing, click to select the Print background colors and images check box, and then click OK.

    Also, a few similar StackOverFlow Posts