Jump to content

pstein

Members
  • Content Count

    67
  • Joined

  • Last visited

Community Reputation

1 Neutral

About pstein

  • Rank
    Newbie

Recent Profile Visitors

3,412 profile views
  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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;
  8. 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
  9. 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
  10. 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
  11. 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?
  12. 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
  13. When I look at <li> elements of an <ol>...</ol> then the space gaps between the <li> lines are more than the "usual" line-height defined in <body> or parent elements. No special, additional margin or padding values are assigned in CSS. So I guess there is a default built-in margin-bottom or margin-top or padding-bottom or padding-top value. What is it? How can I tell the browser rendering engine to ignore these default built-in values for <li> elements? Or how do I overwrite them by my own values? Peter
  14. Assume I have a CSS stylesheet link similar to http://www.foobar.com/aaa/bbb/ccc.css Now I want to show the content (=CSS rules) of this stylesheet in (Firefox) browser. Unfortunately the css file content is compressed resp. written in one long line. Is there a way to beautifiy the css content to a more human readable format with javascript code? Peter
×
×
  • Create New...