Print CSS

Hello,

I’m having a problem with a print CSS I’ve created, you can switch to it fine on the page using a simple css switching script, I’ve set all the images and the div containing the menu to display:none

All looks fine on the screen, perfect in fact, however if you do a print preview the menu shows up as well as *some* of the images (but strangly not all).

I wasn’t sure if this was something to do the TV’s the images are in? Anyone else had this kind of problem?

Thanks,
Sian

It’s strictly a CSS (or borked browser) problem as MODx has no ability to magically change the rendering engines in browsers. That’d be cool though!

I didn’t think it was a modx thing, but what the dickens is it!! It’s driving me quite mad. It does it in all browsers when you go to print preview.

Does anyone know how print preview thing would put a spanner in the works? Or has anyone had this kind of problem?

I’ll keep searching and report back if I find out anything, just incase it helps anyone else pulling their hair out.

Sian

Are you sure that you have the link to the print css correctly in your template head? It sounds like you’re not getting a print css at all in the browser’s print function.

Something like

Most print functions won’t show background images unless you explicitly configure them to do so, so that may be why you don’t see all the images in your print preview.

Is the site accessible that you could provide a link? Might be easier to see then.

Also, are you using @import for your print CSS, or don’t have a media declaration on your main CSS?

Keep in mind that stylesheets cascade, not only external to internal and less specific to more specific, but if your main stylesheet is called with no media declaration and then your print version is called as print, then anything in your print version that doesn’t hide, eliminate, or change any declarations in your main CSS will still use the main CSS for rendering.

Hi,

Sorry it’s taken a while to get back.

Here is the style sheet call in the head of template




I’m using javascript to switch between the above. Do you think it may be because I haven’t set the type as print? I’ve just noticed this so will try.

As I said it works fine on the screen, the print page displays perfectly - no images or navigation, it’s just when you go to print preview it puts images and navigation back in! With no styling as the style sheet has set them to display none.

I’ll make that change and see if it’s any better.

Thanks for all your help.

Sian

You technically aren’t using a print stylesheet. You may have styled a sheet to account for printing, but you are really using it for screen and projection. If you haven’t declared a media="print" stylesheet, then it will use the current stylesheet for print as well as screen and projection... then again, declaring the sheet for screen and projection may mean that any other media will operate as if there wasn’t a stylesheet... I don’t remember precisely now how that would work.

It all gets suprisingly complex and intricate, the differences of whether you call a stylesheet or alternate stylesheet, declare or not declare media, import versus link, and the way different browsers handle things.

Why exactly you are getting what you are getting, I’m not sure. Eric Meyers O’Reilly book on Cascading Style Sheets is highly recommended though.

There’s also a good article "Going to Print" on A List Apart.

Quote from: rthrash at Jan 10, 2007, 09:09 AM

It’s strictly a CSS (or borked browser) problem as MODx has no ability to magically change the rendering engines in browsers. That’d be cool though!

IE7 http://dean.edwards.name/IE7/ plugin ? ...

I’ve used that; it has its limitations. It doesn’t change the browser’s rendering, all it does is provide javascript functions to change the rendering after the page is already loaded. Like the granddaddy of all FOUC.