Which element/CSS is responsible for printing invisible stuff?

[pstein]

Lets start with a sample web page (german product review):

https://www.chip.de/artikel/Fahrradschloss-Test-Die-sichersten-Fahrradschloesser-im-Vergleich_141298173.html

 

Now don't search for a "print" button or link on the webpage.

Go instead to the "print" menu of your browser (Firefox or chrome) and print the whole web page into a local PDF file.

Use for example the wide spread, well known free PDFcreator printer tool. But others seem to show the same problem.

As you can see in the resulting pdf each page starting from page 2 show a messy, annoying "Tab" border picture at the bottom which is NOT visible on the original webpage and which covers a part of the text.

See attached snapshot as well.

Which HTML/CSS element is responsible for this mess?

 

Thank you

Peter

 

Edited April 23, 2019 by pstein

[Funce]

Hi there,

I wouldn't recommend attempting to use the browser functions for printing webpages. They were definitely made for old websites in mind. You may get more luck out of an extension which takes screenshots of the page.

 

To answer your question: You're looking for this element

<div class="sticky-wrapper" style="">

Its a mobile advertising banner.

[pstein]

Great! Thank you