View Full Version : Print Css problems

11-16-2010, 06:49 PM
I am creating a print css for
since the images at the top are white they will not print, so i had to recreate them in black......
on the index page I am declaring the two images

<img src="Site/themed_images/h1White/UNIQUE PROGRAM OF IP REPRESENTATION_h1W.png" alt="Unique Program of IP Representation"
style="z-index: 1; position: absolute; top: 30px; left: 31px; right: 386px;" />
<img id="black" src="Site/themed_images/h1Black/UNIQUE-PROGRAM-OF-IP-REPRESENTATION_h1B.png"alt="Unique Program of IP Representation"
style="z-index: 1; position: absolute; top: 30px; left: 31px; right: 386px;" />

and then in my screen stylesheet (styles.css) i have taken out the black image

#seo_1 h1 #black{

But in my print.css i have declared
#seo_1 h1 #black{

but when i go to print this page the image does not display......?
any ideas would be much appreciated, i have been banging my head against the wall over this print stylesheet...
Thanks again!

11-16-2010, 11:47 PM
One thing I would suggest to check is the order that you're calling the stylesheets in. If you are not declaring a 'media' type on your non-print stylesheet make sure you're calling the print.css after your main one.

That might be the cause but it's the first thing that came to mind

11-17-2010, 12:42 AM
Do not know if it is a problem, but your image is named in uppercase letters it is best to always name images in lowercase letters for servers to read.

11-17-2010, 12:55 AM
The whole point of print styles is to get rid of the unnecessary cruft and suchlike. Dumping images like that into the output classifies as unnecessary cruft. If an image is necessary to keep context, use it. If not, (which that is not), dump it. People with inkjet printers will love you for ramming crap like that into a print version. An image of that type uses five times plus more ink than the comparable text version.

11-17-2010, 01:30 AM
Sbolton, you definitely have to apply a “media” attribute to the other stylesheets, too, or, as said earlier, move the print stylesheet after the regular ones if you don’t apply the above mentioned attribute, otherwise the regular stylesheets are overriding the print styles.

And yeah, I would hate you for wasting my printer’s ink for an image that adds no value to the information I’m going to print. That book kind of image has no relevance for those that are going to print the page, it’s purely decorational.

11-17-2010, 04:17 PM
Thanks for the replies.... I actually just used a combo of z-index and display none.
Stephen/matt- I understand what you mean by the graphic next to the text not needing to print ( and that is how it was originally done) but it was a request from the client, so my hands were tied..