CSS print sheet problem
What a maddening problem.
I开发者_如何学JAVA'm working on a site built on top of a CMS, so the markup is... not clean. I'm trying to write a print style sheet but it's being wildly inconsistent across browsers (I know, a shock).
Link: http://www.gastongov.com/departments/county-commission/contact-info
IE7 and IE9 look fine.
IE8, the text is larger and the footer disclaimer is cut off on the right side of the page.
Firefox 4 is the worst, as the content is bumped down to the 2nd page, and any content that doesn't fit on that page is hacked off never to be seen again.
PLEASE help. I'm at the end of my rope trying to get these browsers to work in Dead Tree Mode.
You've got a few curly problems, but here are some easy things that will at least help diagnosing and fixing them easier, even if they don't fix the problems themselves directly.
Your print style sheet loads before 'page.css' and a bunch of other CSS files which appear to come from the CMS you're using. All of which have an effective media type of 'all'. Any styles which appear in both places can be overridden. I see you've gone crazy with !important in your print.css, which suggests you've maybe already thought of that, or are stuck with it.
For the text sizing issue, I would look at using a print-specific 'reset' stylesheet, to set a base font-size on the <body> of a sensible point size (10 or 12pt). Points make a lot of sense for print-based styles, and don't rely on the browser remapping a pixel size to points on the printer.
Then for all of your text-based elements you want to give a different size to, specify a multiplying value in ems. So, you might have:
body {font-size:10pt;}
h1 {font-size:1.8em;}
h2 {font-size:1.4em;}
h3 {font-size:1.2em;}
/* etc. */
As far as Firefox cutting things off goes, I seem to recall that printing is handled differently inside of forms - but I can't find where I got that information. It might be relevant, because your entire page is wrapped in a <form> element (thanks to your CMS, I guess). As a test, try saving out your page to static HTML, and removing that form element - see if you get a different result when you print.
Good luck - this print stuff is nasty at the best of times - worse yet when you don't control the HTML!
加载中,请稍侯......
精彩评论