Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2011
    Posts
    106
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Why is there still a margin/padding at the top when printing?

    Lets talk on the following (simplified) example webpage:

    https://blogs.systweak.com/uninstall...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.

    View capture

    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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,170
    Thanks
    38
    Thanked 1,090 Times in 1,086 Posts
    Hard to tell without HTML/CSS. Do you have a print css file? That's the one we need to see. Maybe this article can help https://www.sitepoint.com/css-printer-friendly-pages/
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Aug 2019
    Location
    United States
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good question!

    You should use cm or mm as unit when you specify for printing. Using pixels will cause the browser to translate it to something similar to what it looks like on screen. Using cm or mm will ensure consistent size on the paper.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,688
    Thanks
    5
    Thanked 530 Times in 516 Posts
    Given the train wreck laundry list of how NOT to build a website it is, could be any of a million different things. It's why sites like that if you care about things like print generally need to be completely trashed and started over from the beginning.

    WITHOUT mental midgetry like bootcrap. Without turdpress pissing all over the markup with static style and scripts that have ZERO business in the HTML in the first place. WITHOUT id's on tags that don't even warrant the use of ID's (like EVERYTHING inside <head>). WITHOUT blowing 80k of HTML to deliver 7.2k of plaintext and not even a half dozen content images -- not even 12k of HTML's flipping job!!!

    ... and perhaps including actual media targets on the <link> instead of trying to derp it with @media (screen) or @media (print). 99.99999% of the time you see either "screen" or "print" in an @media, the person who built the markup doesn't know enough HTML or CSS to have done so. JUST like how classes like this:

    Code:
    <body class="post-template-default single single-post postid-72178 single-format-standard group-blog">
    Means they're unqualified to write HTML. Just like how this:

    Code:
     <div class="col-xl-12 col-lg-12 col-md-12 col-12">
    Indicates not being qualified to work with HTML or CSS... or even bootcrap for that matter. If they're all "12" then you only need the last one.

    Just like this:

    Code:
    <p style="text-align: center;"><strong><span style="font-size: x-large;">Install the 24 Hour Trial Version Of The Software</span></strong></p>
    or this:

    Code:
    <p><strong>Step 1:</strong></p>
    or this:

    Code:
       <article class="col-xl-6 col-sm-6 col-12 small-post topic-post">
          <div class="post-img-block"><a class="post-overlay" href="https://blogs.systweak.com/things-to-do-after-restoring-windows-settings-using-system-restore/" aria-label="What’s More Secure? Fingerprint Recognition vs Facial Recognition"><span><i></i><i></i><i></i></span></a>
            <img src="https://systweak1.vo.llnwd.net/content/wp/systweakblogsnew/uploads_new/2019/03/placeholder.png" data-src="https://systweak1.vo.llnwd.net/content/wp/systweakblogsnew/uploads_new/2019/09/Blog-Cover-How-to-Create-restore-point-in-Windows-10-1-555x347.jpg" class="lazyload" />
        </div>
          <div class="post-texts">
             <div class=""><a href="https://blogs.systweak.com/things-to-do-after-restoring-windows-settings-using-system-restore/">Things to Do After Restoring Windows Settings Using System Restore</a></div>
             <!-- <h2 class="post-heading"><a href="http://192.168.0.196/systweakblogs/fingerprint-recognition-vs-facial-recognition/">What’s More Secure? Fingerprint Recognition vs Facial Recognition</a></h2>
             <div class="post-comt-date no-space post-meta"><a href="http://192.168.0.196/systweakblogs/fingerprint-recognition-vs-facial-recognition/"><i class="icon icon-comt"></i> 0</a> <a href="http://192.168.0.196/systweakblogs/fingerprint-recognition-vs-facial-recognition/"><i class="icon icon-time"></i> 11 min read</a> </div> -->
          </div>
       </article>
    All bespeak the three "i"'s of web development. Ignorance, incompetence, and ineptitude.

    Just tracking down what print is going to do? So much of a headache it would probably be faster to start over from scratch. As I always say, apologies if that comes across as unduly harsh, but that's the light of reality for you. You've got anywhere from six to twenty times the code needed to build the page, is it any wonder diagnosing something simple is a nightmare?!? This is why I consider using wordpress for anything more complex than a blog for grandma to be utter folly, and a complete SCAM if someone tries to tell you it's "good for business". This is why halfwitted incompetent BS like bootcrap does nothing more than saddle up nubes and rubes alike and take them for a ride.

    But no, no, it's all fine. How dare anyone come right out and say that. "Wah wah wah, run to teh moderators somebodies es teh usin teh harsh ranguage."

    ANYONE making up excuses for these systems is nothing more than deluded, or an outright sleazy predator.
    Last edited by deathshadow; Sep 11th, 2019 at 02:59 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •