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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    printing cuts off right side of page

    When I print my website, the right-side margin gets cut off.

    I use CSS and XHTML.

    I have experimented with a couple of the CSS properties to see how the page would print:

    (The header is defined by different rules and not the rules below and it has no problems - the placement of the header is centered when printing).

    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 problem is that in order for my page to look normal, these two variables need to be in place. But the printing is negatively impacted.

    Is putting the content in a table a way to fix this issue?

    Any assistance would be appreciated! Thanks!

  • #2
    New Coder
    Join Date
    Apr 2010
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    I think what you need to do (if you haven't already) is look at creating a stylesheet specifically for printing. You can then do something like so: (bear in mind this is a very simple example)

    Code:
    <html>
    <head>
      <link href="default.css" rel="stylesheet" type="text/css" media="screen" />
      <link href="print.css" rel="stylesheet" type="text/css" media="print" />
    </head>
    <body>
      <div class="content">
        Your content here...
      </div>
    </body>
    </html>
    The your stylesheets might look like so:

    default.css:

    Code:
    .content { width:700px; }
    print.css:

    Code:
    .content { width:100%; }
    Does that help at all? You might have already tried this so sorry if i'm treading on old ground
    BIOSTALL.com - Web Development Snippets, Hints and Tips

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much! That was the answer! I just copied the default stylesheet and deleted the width and margin-left elements and saved this as print.css. I also added the "screen" attribute to the main css reference and also a "print" attribute for the reference!

    Thank you so much! Now, the print screen is perfect!


  •  

    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
    •