Web Page vs. Print Preview of the web page

[soccrt]

I believe my HTML is in almost perfect, yet there is a HUGE difference between the web page and when someone tries to print it out, which can be displayed in print priview. Is there any particular reason for this, and how may I go about fixing it?

[travelin cat]

soccrt,

This is a fairly common problem, most web pages are not designed to be printed. You may have to alter the html for printing and offer something like "click here to print this page" on the original page.

We have this problem with clients all of the time.... some times it looks good printed off of a mac and lousy printed off a pc and sometimes it is the other way around.

Another thing to think about are the low rez graphics used on web pages, they may, and often times do, look awful when printed. You may wish to offer higher rez images for things such as product shots...

hope this is helpful

[bruhaha]

You often can create a special "print version" by using CSS, enclosing your set of print styles inside
@media print { }

I use this approach for pages that need to strip out images or that I want to use a different font to print (e.g., my web page may display Verdana, but the print version works better with TimesNewRoman).

[monkeythumpa]

An 8.5x11 inch piece of paper converts to 600 px wide at 72dpi so if your page is more than 600 wide it will get cut off. If you print in lanscape mode that will give you almost 800px. If you expect a lot of people to print your page consider going no wider than 600px.

[moltar]

The reason it might not look similar is because IE does not print background color and images by default. if you have lots of backgrounds on the page - that might cause the problem.