pstein

@dsonesuk: Thank you. It works

Occasionally I load a web page which contains a text line and immediately appended after the right side an image <img> I want to let the <img> start in a next line. So I need a kind of <br> separation between text and image (not with <P>). However I have no access to the original webserver but want to apply a modification afterwards (after loading) I can imagine that there is a CSS property (for <img>) which let me tell the browser engine "put in next line". How can I achieve this in detail? Peter

Assume I have a CSS background key similar to .logo { background: url(/static/foobar/mylogo.jpg) 0px -no-repeat; } Is there a way to convert this background property into a foreground image by Javascript? All other configurations (margin, padding, background-position-x, background-position-,....) should remain untouched or converted accordingly. Thank you Peter

Have a look at the following webpage: https://www.makeuseof.com/tag/music-player-apps-android/ When you print this webpage (from Firefox) into a *.pdf file then only the first page (of the core article) is printed. The remaining article text is suddenly cut. Why? Exactly which CSS statement is responsible for this cut? Peter

At first an example: <div class="foobar" ....>.... <div class="....." ...>..... <div class="....." ....>.... <div class="....." ....>..... <img src="https:\\www.imgdomain.com\..." ....></img> ...</div> ....</div> ....</div> ....</div> How do I address the following elements: Find <img> with src="https:\www.imgdomain.com* and go upwards in hierarchy until a <div> element with class="foobar" ist found Same as 1. but this time the element just below <div> with class="foobar" should be referred (which could be the <img> element itself) If no <div> element with class="foobar" is found nothing should happen jQuery or Javascript can be used

Sorry, they changed the headline meanwhile. Take just the current headline or first paragraph of core article Thank you

Lets take an example from a german online magazine: https://m.pnn.de/coronavirus-in-europa-spanien-hat-nun-mehr-bestaetigte-infektionen-als-italien/25560996.html RIght click on the headline beginning with "Coronavirus in Europa Spanien hat nun mehr" and select "inspect" from context menu The WebDeveloper I do NOT find a valid font-family name. All existing there are either disabled or have a value "inherited". So it must be the browser default which is Courier New. But this font is NEVER "Courier New"! So how do I find out the real font family name otherwise? Peter

Assume I want to print a Wikipedia article e.g. https://en.wikipedia.org/wiki/Blu-ray into a pdf file. I click on the left side on "Printable version" ....and got a *.pdf document which contains text with ugly big font-size and not appropriate line-height. The font-size and line-height is significantly different from what I see on the screen. I want to change these CSS values (later after loading). But where do I find the corresponding values? I guess they must be somewhere in a "@media print" section. But how (where in which CSS stylesheet file?) do I find these print CSS instructions? Peter

Sometimes when I inspect the web page HTML/CSS code and search for the font-size and line-height of a certain text I can not find it. When I right-click (in Firefox) on this certain text and select "Inspect element" the corresponding HTML/CSS code is shown in the lower pane in WebDeveloper. However in the lower right sub pane I do not find the real, final font-size and Line-height. All occurencies are labeled as "inherited" Inherited from what? I expect to get at least one valid font-size and line-height CSS value in the cascade chain. Lets take an example from a german computer online magazine: https://www.zdnet.de/88377738/smb-luecke-microsoft-veroeffentlicht-patch-kb4551762 Now right click on the line beginning with Set-ItemProperty -Path "HKLM:\SYSTEM\Current...... at the bottom of the core article and inspect element. For this text I found only "inherited" values. How do I find out the current font-size and line-height? I am NOT interested for a particular example but on how to find it out in general. Peter

At first lets have a look at an example webpage: https://www.thewindowsclub.com/most-useful-commands-for-powercfg-command-line As you can see the article contains some <pre> blocks which in turn contain commands lines which are NOT wrapped at the browser window end. Instead a horizontal slider is displayed which let user scroll to the currently invisible part of the command line. Now if I want to print this page (into *.png or *.pdf) important parts of these commands are NOT displayed. How can I apply some CSS/Javascript commands which tell the rendering engine to AUTOMATICALLY (soft) wrap these over-long lines at suitable blanks (!) into a second (or even third) line in <pre> block? Peter

Lets take an example webpage: https://www.thewindowsclub.com/windows-task-scheduler-not-running How can I (by modifying the CSS code after loading) justify all images of the main article to the left? As you can see they are currently centered. Peter

When I print occasionally web pages into a pdf file then images on this web pages are NOT split. When an image does not fit on the current pdf page then a page break is inserted and the image is put on the top of the next pdf page. How can I allow image split in pdf printing (if necessary) for ALL images on the current web page? Is there a corresponding attribute for the <img> tag? Peter

Lets talk on the following (simplified) example webpage: https://blogs.systweak.com/uninstall-unwanted-programs-on-windows-10/ I did now the following: - I opened Firefox--WebDeveloper - I deleted the element <header class="site-header">.... </header> in WebDeveloper - I changed in WebDeveloper all the values for CSS key ".article-shadow" and attributes margin-top, padding and border-radius to 0 As you can see from the following snapshot the headline "Easy Tricks to uninstall Unwanted...." appears in browser window directly below the top border. http://easycaptures.com/8003064666 Now when I print this page into a pdf then an unexpected big, big gap between top border and headline is inserted. Why? Does it come from @media print section? Which CSS value is responsible (otherwise)? How can I get rid of the gap in pdf printout Peter

In a webpage I have the following HTML code: <img class="logo" src=....>...</img> with the corresponding CSS: .logo { width: 12rem; .... } img { width: auto !important; ... } As you can see there are two somehow contradicting width values. Ok, since the width in IMG has an !important postfix it has a higher priority. And this is the problem. How can I disable the width value/key in IMG CSS specification and let the width value for .logo become active? How can I delete a CSS key? Since "auto" is already the default value overwriting it with the default value makes no sense. I have no access to the original html/CSS code but must apply it afterwards Thank you Peter

I want to print a whole webpage which (when printed) creates ONE pdf file with many pdf pages. Example https://blogs.systweak.com/uninstall-unwanted-programs-on-windows-10/ Print with Chrome or from chrome-based browsers

I have a webpage which contain the following element: <heaeder class="site-header"> .... </header> With CSS class definition as follows: .site-header { position: relative; z-index: 223; .... box-shadow: none; } When I print now this (long) web page into a pdf doc file then this header pane appears at the top of each pdf page. How can achieve that this header pane appears only at the FIRST pdf page? Thank you Peter

Hmm, thank you for the suggestion. But I didn't understand. Have a look at the attached snapshot for sample webpage: http://www.ilovefreesoftware.com/13/featured/create-free-dynamic-dns-websites.html I want to have a (pdf) page-break BEFORE the headline "DUCKDNS". I opened therefore Inspector of Firefox and inserted break-before: page; DIRECTLY for this element. But it is even not accepted. Why not? Peter

Assume I want to print a large web page into a pdf file by using the browsers pdf printer driver. It works. However the pdf page breaks created by the printer driver (or browser rendering engine?) are really at a bad place. For a better printing result I would like to insert (manually) some page breaks into the HTML/CSS. How can I achieve this? Read: what are suitable HTML/CSS instruction for "insert page break here when pdf printing"? Is there something like a <div style="pagebreakbefore" .....>? Thank you Peter

I have troubles when printing a web page in Firefox (into pdf file). The web page does not detect resp. insert page breaks. I found out that everything works fine when I disable (=uncheck) the checkboxes before the CSS key values display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; I have no access to the original web page code or server. So I have to change them after loading by a javascript script How can I disable them resp. whats the default (=non flex value)? display: none !important; flex-direction: none !important; does not help How else can I achieve it? What about disabling flex compoletely including the CSS values -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column;

Great! Thank you

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

Assume I load a web page from an external server (which is not under my control) which contains a CSS with a !important statement for a lets say "file-size. attribute". Now I want to overwrite this CSS statement with my own value e.g. by using Greasemonkey AddOn in Firefox which adds new, additional CSS statements to the pool of existing CSS statements. This "normal" overwriting can be performed by appending an "!important" tag at the end. But what if the original CSS contains already an "!important" tag? How can I later/afterwards overwrite this with an even higher priority !important value? Peter

When I print webpages (on paper or into pdf) then occasionally embedded pictures are split among two pages. How can I prevent this split? If an image does not fit on a (pdf/paper) page any more it should be shifted to the following (pdf/paper) page. Peter

Assume I want to modify/overwrite the CSS of an existing webpage. Obviously I have no access to the original server. Instead I want to execute a Greasemonkey script with Javascript code after loading This CSS contains for various (unknown) elements and (unknown) classes the following CSS keys: .... { font-size: 18px; ..... } I want to replace all in these occurencies by the following: .... { font-size: 14px; ..... } resp. .... { font-size: 14px !important; ..... } How can I achieve this with Javascript? Again: I do not know all the class names resp IDs which contain the CSS key above. The class names could vary from time to time. So I need a kind of filter for the overwrite operation. Maybe I have to recursively navigate through the DOM tree. How does that work?

How can I enforce a line wrap (resp <p>) after a <h3>...</h3> element? The following text/images should always be placed below the h3 headline. The line wrapping should be achieved by CSS rule/key. I have no access to the original html source