Removing elements that appear when printing, using print.css stylesheet [duplicate]

Question

Problem

I'm currently using a stylesheet print.css to remove elements and some styling to create a printer-friendly page, but I can't seem to remove four things that appear in the corners of the page, but are not in the HTML: pagination, date printed, title of page, URL of page

Possible solution?

I've seen this example from the LA Times that shows elements that are not in the HTML, but typically appear when printed being removed: http://graphics.latimes.com/oscar-bingo-2015/

Answer 1

There are quite a few posts on the subject here on StackOverflow:

• Remove header and footer from window.print()
• Removing page title and date when printing web page (with CSS?)
• Can I remove the URL from my print css, so the web address doesn't print?
• How to remove the URL from the printing page?
• Disabling browser print options (headers, footers, margins) from page?

Looks like it works by using the @page media property in combination with the print media property:

@media print {
    @page { margin: 0; }
  }

However, it only seems to work in Chrome (for the moment). Firefox can be made to oblige, though. Elsewhere, it was suggested to create PDF on the fly - or to use JavaScript to set at least the page title to an empty string.

Also, I'd question why you'd want to hide something your users are usually used to have control over.

To answer your question, though: The LA Times use bootstrap, which sets the page margin as follows:

...@page{margin:.5cm}...