Minz. Out of the box

Opera and media="print"

03/25/2004

This one came up during one of our current CSS workshop projects:

Consider a given file with two linked stylesheets. One's for rendering on screen while the other is meant for styling the printed output, using the according media-types. The screen version's styled with a background-image for the html, while there's no background-image assigned to the print CSS at all.

See the following test-file for reference: Opera. To print or not to print. Now, with these given conditions, make sure your Opera print options are like the following:

Screenshot of Opera's print options

Check Print page background.

Now, go either to Opera's print preview or print out the page. And this is what happens. Opera is misleadingly printing out the background-image we declared in the screen-styles. On top of that, it is ignoring our background-image: none; (which should not be needed) declaration we made in our print-styles.

Applying a completely different background-image to the print styles doesn't change anything either. It always shows the image we wanted to show up only on screen. Go see for yourself.

Now, would you call this a bug or am I missing something completely?

Note: I even tried embedded styles and using the @import method for the different stylesheets. Same effect. This behaviour occurs in both versions I tested (Opera 7.23 Build 3227 and Opera 7.50 Build 3494 on WinXP Pro).

Comments

Christine:

Hmmm.... I know this frustration well!

Posted: 03/26/2004

Minz Meyer:

and so do I

Posted: 05/20/2004

Teresa Boose:

Hi Christine and Minz!

I'm finally getting close to posting my new redesign of the Kansas City, Kansas Public Schools website. I was fat and happy thinking all was well looking at my 5 browsers here in the office and one at home ... until I posted just the home page as a test. I have separate screen and print style sheets (like in class).

I got a phone call saying there was no navigation (AOL). I guessed correctly that AOL was only showing the print styles. So I did a little searching and discovered Browsercam.com. I tried it out and discovered that out of the 23 browsers I tested, five used the print styles instead of the screen!

I quickly took down the test page and am back to troubleshooting (I keep telling myself "I love my job, I love my job!" just to keep going ... SIGH!)

I'm about to just chuck the print styles completely. Any rays of hope from anyone?

Teresa Boose
Web Manager
Kansas City, Kansas Public Schools

Posted: 07/13/2004

Teresa Boose:

Problem solved!

Put the link to the screen stylesheet first in the code, then put the link to the print stylesheet.

In the print stylesheet surround all the code with @media print { all your code goes here }.

In essence you need to tell certain browsers twice that this is a print only stylesheet. It solved the problem in all the browsers I checked that were displaying the print styles.

I AM SO HAPPY!

Posted: 07/14/2004