Media print css not working in IE11 print preview

Question

I've a page with css applied. To customize the print, in the same css file I have some @media print styles. These work perfectly fine when performing the print but, testing with IE11, I've realized that the preview works as if the media print styles weren't considered. If, on the other hand, I define a brand new css style and I link it as a print stylesheet, then also the preview works fine (however this impose me to duplicate in this css lots of styles defined in the normal css stylesheet, that I don't want to change in the print).

I don't know if it can be of any help but the way I print the page is by calling a javascript function which selects just the content of a div in my html page (#content) and it prints it (also adding a copyright notice and a logo to the bottom of the printed page)

function printit() {
    var body = document.getElementById('content').innerHTML;
    var tmpWin = window.open('', '', 'width=640,height=480');
    tmpWin.document.open("text/html");
    tmpWin.document
            .write("<html><head><link rel='stylesheet' href='css/stylesheet.css'></head><body>");

    tmpWin.document.write(body);
    //we add the copyright notice
    tmpWin.document.write("<div id='footer'><p>&copy; <script>document.write(new Date().getFullYear())</script> - All rights reserved</p><img id='logo_vertical' alt='DCL' src='img/logo_vertical.png'></div>")
    tmpWin.document.write("</body></html>");
    tmpWin.document.close();

    tmpWin.print();
    tmpWin.close();
}

Any idea why I'm having this problem?

Thanks

Have you find any other sollution?

Erick Sperandio
– Erick Sperandio

2017-03-20 22:56:35 +00:00
Commented Mar 20, 2017 at 22:56 — Erick Sperandio
– Erick Sperandio, Commented Mar 20, 2017 at 22:56

Erick Sperandio · Accepted Answer · 2015-10-20 20:37:20Z

I saw your question, but without any answers. I was having this same problem in IE 11 using ExtJS 4.2.2, and I couldn't easily find a solution for it.

It seems that IE 11 is fitting the window content using the entire page as reference, not only the window, as was expected to do. If you use Print Preview you can check this behavior.

After digging a lot, testing many workarounds, I finally managed to get a working solution. In my case, what I needed to do was to modify the printing script, as follows:

 <div id="print">
        <button type="button" onclick="document.execCommand('print', false, null);">Print</button>
 </div>

In your case, the code below should work (instead of tmpWin.print()):

tmpWin.document.execCommand('print', false, null);

As you can see, "document.execCommand" is used instead the classic "window.print" function.

I know it has been almost a year since you posted it, and I imagine that you have already got it working. However, for the sake of the community, here is a solution. I hope this helps anyone, too.

Menna Ramadan · Accepted Answer · 2020-10-07 14:12:00Z

0

I added my css styles in

@media print { //css here }

then make sure that "Print Background colors and Images" is checked in print setting on IE to be able to apply your styles (colors and backgrounds) for printed pages

answered Oct 7, 2020 at 14:12

Menna Ramadan

4853 silver badges12 bronze badges

Comments

Pankaj Upadhyay · Accepted Answer · 2018-12-06 07:24:56Z

-1

use this

@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 css here
}

answered Dec 6, 2018 at 7:24

Pankaj Upadhyay

2,12022 silver badges23 bronze badges

1 Comment

Brandon Gano Over a year ago

This will enable print styles in IE/Edge when browsing with high contrast mode enabled. If you hide navigation in your print styles, for example, users with high contrast enabled would not be able to navigate your site.

Collectives™ on Stack Overflow

Media print css not working in IE11 print preview

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related