Can I remove the URL from my print css, so the web address doesn't print?

Css Problem Overview

I have written some stylesheets - including a print.css - and it's working fine.

I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?

The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.

Css Solutions

Solution 1 - Css

In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).

In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.

In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/

Solution 2 - Css

Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.

The only alternative I know of is generating PDFs, with which you have full control over the printed output.

Solution 3 - Css

Use that code.that will help to solve your problem

@media print 
{
  @page { margin: 0; }
  body  { margin: 1.6cm; }
}

Solution 4 - Css

@media print 
{
  a[href]:after { content: none !important; }
  img[src]:after { content: none !important; }
}

Solution 5 - Css

you can try this in the stylesheet:

@page{size:auto; margin-bottom:5mm;}

But this also removes the page number

Solution 6 - Css

This solution will do the trick in Chrome and Opera by setting margin to 0 in a css @page directive. It will not (currently) work for other browsers though...

Solution 7 - Css

It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.

Solution 8 - Css

If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.

Show your users how to disable headers and footers in the «Page setup...» dialog.

Solution 9 - Css

The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.

Solution 10 - Css

Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.

http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins

However, as of 2017, the @page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:

@page { size: auto; margin: 0mm; }

Credit to Vigneswaran S for this tip.

Solution 11 - Css

Remove the url from header and footer using below method

 @page { size: letter;  margin-top: 4mm;margin-bottom: 4mm }

Solution 12 - Css

I've also tried everything but finally I'm writing below code to make URL shorter:

var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);

But you need to make a custom PRINT button for user to click.

Solution 13 - Css

Now we can do this with:

<style type="text/css" media="print">
@page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
}
</style>

Source: https://stackoverflow.com/a/14975912/1760939

Solution 14 - Css

I assume that you are talking about the URL that shows in the footer of the page.

If so, this is set by the browser and it is not something that you can do from your code.

Solution 15 - Css

I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.

Solution 16 - Css

i found something in the browser side itself.

Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.

Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.

Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.

Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.

Solution 17 - Css

This is a browser issue. But you can handle this problem by these line of codes:

<style type="text/css" media="print">
@media print
{
    @page {
        margin-top: 0;
        margin-bottom: 0;
    }
    body  {
        padding-top: 72px;
        padding-bottom: 72px ;
    }
}
</style>

Solution 18 - Css

For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.

I hope this helps.

Content Type	Original Author	Original Content on Stackoverflow
Question	Mark	View Question on Stackoverflow
Solution 1 - Css	Daniel Gross	View Answer on Stackoverflow
Solution 2 - Css	Pekka	View Answer on Stackoverflow
Solution 3 - Css	Muhammad Fahad	View Answer on Stackoverflow
Solution 4 - Css	Darshan Kathiriya	View Answer on Stackoverflow
Solution 5 - Css	mtchuente	View Answer on Stackoverflow
Solution 6 - Css	awe	View Answer on Stackoverflow
Solution 7 - Css	Simon Whitaker	View Answer on Stackoverflow
Solution 8 - Css	Beat Bolli	View Answer on Stackoverflow
Solution 9 - Css	Anthony	View Answer on Stackoverflow
Solution 10 - Css	Aniruddha Sathe	View Answer on Stackoverflow
Solution 11 - Css	Syed Shibli	View Answer on Stackoverflow
Solution 12 - Css	James Yang	View Answer on Stackoverflow
Solution 13 - Css	Syakur Rahman	View Answer on Stackoverflow
Solution 14 - Css	Mitchel Sellers	View Answer on Stackoverflow
Solution 15 - Css	Rusty Horse	View Answer on Stackoverflow
Solution 16 - Css	Ubaid Ur Rehman	View Answer on Stackoverflow
Solution 17 - Css	Md. Hasibul Huq	View Answer on Stackoverflow
Solution 18 - Css	Jeanne Wise	View Answer on Stackoverflow