hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : When printing, margin-left cuts off right side of page
Reply

Forum Jump

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

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
New Member
 
Join Date: Nov 2010
Posts: 4

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


Hello!

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!

~Patrick



Sponsored Links
  #2  
Old
Retired Moderator
 
Join Date: May 2004
Location: Pflugerville, TX
Posts: 11,222
Quote:
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

Code:
<?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:

Code:
<?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  
Old
New Member
 
Join Date: Nov 2010
Posts: 4
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?

Sponsored Links
  #4  
Old
New Member
 
Join Date: Nov 2010
Posts: 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  
Old
New Member
 
Join Date: Nov 2010
Posts: 4
Tried removing width and margin-left; Results...

Oh!

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  
Old
Retired Moderator
 
Join Date: May 2004
Location: Pflugerville, TX
Posts: 11,222
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  
Old
Newbie
 
Join Date: Sep 2010
Location: London
Posts: 17
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:

Code:
<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.

__________________
Great Tutorials and Advice...
hackproject.com | Web Design and Developers Blog


Reply

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

Related posts from TheWhir.com
Title Type Date Posted
HP Restructuring will Separate Enterprise and Cloud Offerings from PCs and Printing Web Hosting News 2014-10-06 17:01:09
Ads Available for the Second Printing of WHIR’s Annual Hottest Hosts Directory Blog 2014-04-08 16:52:36
ProfitBricks Talks Cloud Price Cuts Web Hosting News 2013-07-31 16:20:00
The Value of Partnerships Part 2 - Giving Customers What They Want Blog 2014-04-24 13:27:36
Strategies to Reduce Operating Costs, Avoid Email Blacklisting and Improve Deliverability Webinars 2014-06-10 11:05:29


Tags
margin-left; print; cut off; css

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?