views:

65

answers:

3

Im not sure what could use this, but a client of mine told me that some of the pages of the site I just developed are printed half-and-half.

website: here

What could cause something like this and how do I fix it?

Thanks for any advice on the issue.

+2  A: 

If you have designed the web site for screen media only, then chances are the browser won't be able to make much sense of it.

You can add stylesheet rules (or an entire stylesheet) for print media, using an @media rule.

Oh, and a PDF printer is tremendously useful for testing these things.

tdammers
+2  A: 

CSS background images (such as your images/logo.jpg) are not normally shown in print. They can be enabled by the client; you can't do it from CSS.

If you want the background images to be printed, there are several tricks you can use - but all of them require you to do something else instead of CSS background image. For instance, list markers.

Amadan
Thanks alot. This gave me a better idea of the issue, but it seems like the easiest thing would be to embed images in the code (as you said). I thought using css images was a good practice for site optimization and other benefits?
gdinari
Something I forgot to mention...The client said that some of the pages were "half" printed, meaning that only top/bottom half of a page printed and the other half was empty. I'm not sure, but this sounds more like a problem on their end maybe with their printer, no? Because all of the print previews I did for the site don't show half and half, unless the print preview and an actual printed page have different results.
gdinari
First, "some of the pages" is not well-defined: ask them which specifically, if they didn't tell you. Which pages only have top? Which only have bottom? Otherwise, no clue about that.
Amadan
CSS background images are normally thought of as candy only: makes pages pretty, but is not content (otherwise, they would be in HTML, with the rest of the content). Since printing is about getting content to paper, background images are stripped to conserve ink, unless the user specifically asks for it (in his browser settings). As for optimization: no, AFAIK, there is nothing faster about CSS background images, unless you're using sprites (which you are not).
Amadan
+1  A: 

Printing is browser-dependent, however you can use CSS (2.0+) media type "print" to help you fine-tune when a page is printed. Most browsers have options that will allow you to remove headers/footers, page numbers, and also zoom in/out to help you fit a page better. When a client requires that something be printed, I always opt for PDF in order to prevent the situation you describe.

Keith
thanks Im looking into the media type rule now. It would be better if they did only print pdf's, but ultimately it's their choice.
gdinari