Results 1 to 7 of 7
Hybrid View
-
11-19-2010, 03:24 PM #1New 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
-
11-19-2010, 03:36 PM #2Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
I should mention that it wouldn't make sense for my site to have a "printer-friendly" version available as a link.
Code:<?php if($_GET['status'] == 'print'): ?><style type="text/css">body { margin-left:0 }</style><?php endif; ?>
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>'; ?>
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
-
11-19-2010, 03:53 PM #3New 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?
-
11-19-2010, 03:58 PM #4New 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'; ?>
-
11-19-2010, 04:13 PM #5Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
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 stylesStudio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design
-
11-19-2010, 09:51 PM #6Newbie
- 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">
Great Tutorials and Advice...
hackproject.com | Web Design and Developers Blog
-
11-19-2010, 04:10 PM #7New 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.
Similar Threads
-
Left-side Navigation Menu
By sithpigeon in forum Web Design and ContentReplies: 10Last Post: 05-11-2009, 02:06 PM -
Opinion Needed -Links Placement: Top Or Left Side
By velawan in forum Programming DiscussionReplies: 12Last Post: 03-13-2005, 06:39 PM -
[Javascript] Printing variables to a page... Is it even possible?
By jonathanbull in forum Programming DiscussionReplies: 5Last Post: 12-16-2004, 02:06 PM -
left side menu
By isheikh in forum Programming DiscussionReplies: 0Last Post: 07-02-2004, 05:55 PM -
Printing on to the next page
By Jong in forum Programming DiscussionReplies: 1Last Post: 10-07-2003, 01:25 AM