Results 1 to 7 of 7
  1. #1

    When printing, margin-left cuts off right side of page


    I have a dilemma. I use XHTML and CSS with my website design. I used the "margin-left" property in my CSS file because otherwise the pages are all too far left on the page.

    I applied the following in my site's CSS file: margin-left: 20%

    Well, the problem is that when printing, the right side of the page is cut off; the reason appears to be that since the printer doesn't take into account the CSS styling, the margin-left cannot come into play to prevent any chopping off of the page.

    Please let me know if linking to my website and/or displaying any coding would assist in solving my problem. It's not the worst thing in the world, but if there's an easy fix, I would like to know how to do it.

    I should mention that it wouldn't make sense for my site to have a "printer-friendly" version available as a link. I assume that this option became popular because of the positioning issue (in addition to the ads, navigation, etc. that takes up room).

    Anyway, I welcome any suggestions!

    I'm happy to be here!


  2. #2
    Join Date
    May 2004
    Pflugerville, TX
    I should mention that it wouldn't make sense for my site to have a "printer-friendly" version available as a link.
    Why not? It can be extremely simple to implement

    <?php if($_GET['status'] == 'print'): ?><style type="text/css">body { margin-left:0 }</style><?php endif; ?>
    Stick that ^^ right underneath the link to your regular style sheet.

    Then, for any page where you want to make a printable version, add:

    <?php echo '<a href="'.$_SERVER[REQUEST_URI].'?status=print">Print-friendly page</a>'; ?>
    It's untested, but it should work

    You can always create a print-only style sheet too, but I prefer adjusting styles for print using PHP whenever possible, because it takes away variances in browsers.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Thanks for the information! If I use multiple style-sheets, then do I need to insert the coding multiple times (I could perhaps just insert it right under the style sheet that defines the margin-left).

    However, I notice in your coding that you're asking the printer to print without any margin. What happens with my page is if there is no margin defined then the page is way over to the right. Thus, without any margin it gets cut off. So, actually I need to tell the printer to print with a margin right?

  4. #4
    I copied and pasted the coding as you said to do but I get the following on my page (no link):

    Print-friendly page'; ?>

  5. #5

    Tried removing width and margin-left; Results...


    There's something I should mention!

    I tested out a few things.

    If I remove the margin-left: 26% portion from the stylesheet, the page prints out without cut-off; however, the text moves too far to the right, when viewing the page AND when printing. But there's no cut-off of the right margin.

    If I remove the width: 700px, the page is very wide when viewing in a browser and too wide for my taste, but it's not cut off when printing and prints perfectly.

    The header section of the page is never cut off; it's centered and remains centered. When I don't make any changes to the way the file is right now, the problem is that the printer moves the page to the right side (not the header parts) and thus ignores the CSS styling. If it was in a table, it may not have this issue. I know tables are to be avoided with CSS.
    Last edited by patrickdt; 11-19-2010 at 04:15 PM.

  6. #6
    Join Date
    May 2004
    Pflugerville, TX
    Quote Originally Posted by patrickdt View Post
    I copied and pasted the coding as you said to do but I get the following on my page (no link):

    Print-friendly page'; ?>
    I just tried it, and it worked perfectly for me. Maybe you missed a character somewhere when you copied it?

    I'm guessing the left margin is being interpreted by printers as meaning push everything 20% off the right side of the page, which is why I removed the margin entirely. You can play around with style settings all you want - the important thing is that the print-only version of the page is the only version receiving those styles
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  7. #7
    the easiest way of doing it is just to make a new stylesheet called print.css for example (copy and paste the old one - but change values till it prints correctly), and then just reference the new 'print.css' in your main page with:

    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    Users web browser will then call this stylesheet when preparing the document for printing.

  8. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Similar Threads

  1. Left-side Navigation Menu
    By sithpigeon in forum Web Design and Content
    Replies: 10
    Last Post: 05-11-2009, 02:06 PM
  2. Opinion Needed -Links Placement: Top Or Left Side
    By velawan in forum Programming Discussion
    Replies: 12
    Last Post: 03-13-2005, 06:39 PM
  3. [Javascript] Printing variables to a page... Is it even possible?
    By jonathanbull in forum Programming Discussion
    Replies: 5
    Last Post: 12-16-2004, 02:06 PM
  4. left side menu
    By isheikh in forum Programming Discussion
    Replies: 0
    Last Post: 07-02-2004, 05:55 PM
  5. Printing on to the next page
    By Jong in forum Programming Discussion
    Replies: 1
    Last Post: 10-07-2003, 01:25 AM

Posting Permissions

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