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).
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?
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.
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
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: