Jump to content

Trouble with Print CSS


holmedwa04

Recommended Posts

Hi All,It me again, back with another problem! What's new you say! :) I have recently made a simple print.css file from my original stylesheet and it doesn't do what I want it to because it seems to want to cut some of my text off all of the time! There is absolutely no problems with the width of the content that I can see but maybe a second pair of eyes to have a glance over my code a second time, maybe one of you can spot an error in it!

#content:before {content: "This is a printer-friendly version of this page.  All unnecessary elements have been removed from your printout.  Please visit again at: www.goathland.co.nr";display: block;margin-bottom: 3mm;padding: 3px 3px 2px;background: #f9f8e4;text-align: center}a:link {color: #000000;font-size: 12px;font-weight: bold;text-decoration: none}body {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;background-color: #990033;margin: 5%}table { color: black;font-size: 12px;font-family: calibri, arial, sans-serif;empty-cells: show;border-collapse: collapse;margin: 0px auto;width: 99% } td {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;border: 2px solid black;}.w70 {width: 70%;}.w15 {width: 15%;text-align: center;}.add {width: 20%;text-align: center;border: none}th {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;font-weight: bold;font-style: italic;text-align: center;border: 2px solid black}h1, h2, h3, h4, h5, h6 {margin-top: 0px;margin-bottom: 6px;padding: 0px}div.container {line-height: 150%;background-color: #ffffff;margin: 0;width: 100%}div.header, div.nav, div.right, div.footer, div.footerbox {display: none;}div.main {padding: 0px}img {margin: auto;display: block;border-width: 0px}p.ref {font-family: calibri, arial, sans-serif;font-style: oblique;font-weight: bold;color: #666666;text-align: center;font-size: 12px}pre {font-family: calibri, arial, sans-serif}

Also the content before doesn't work at the moment but that isn't one of my main issues! Here is a link to a small page that you can download to test the stylesheet with if you like:http://hosting.burrawcentral.org/goathland/archive.htmlAny help is much appreciated, I am sure it is just something really small that I have set wrong or missed out that is sending the whole thing wrong!

Link to comment
Share on other sites

Standard printers are fixed width either portrait or landscape. Chances are you are wanting to print portrait. So instead of using percentages (%) try using fixed pixels (px) width instead. Still have your container set as percentages and the control anything and everything within that container using fixed width. Of course you will need to determine what width works best and also you will have no way of knowing how the user's print settings are set. So a fixed width of 600px is a good start. Adjust to suit.If you still have problems, chances are is user's print settings.

Link to comment
Share on other sites

Thanks, seem to be getting the hang of it now. I am just stuggling with this at the moment, I am trying to get this to display after the body:

body:after {content: url("tech.html")display: block;}

But the link to the URL doesn't work, anyone know why? I can just put the text in there and set the properties up but I thought it would be cool to be able to change the text in there etc.EDIT: I have come to a solution for this now, just don't try it! I don't need to link to it because in the print.css it only needs to be changed once to change on all of the pages! :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...