Page Printing With CSS?

[Todd Temple]

Here is a page I am working on...

LINK-
http://lakefrontestates.net/salesKit/lot17a.html

When the client tries to print the page, the map graphic on the right hand side is spilling over onto a second printed page and the first printed page has a blank space left where the image should go. Is there a fix using CSS to accomplish printing this webpage onto one printed page?

Thanks.

Todd

[Dr John]

tricky to advise, when we need a username and password to view it...

[Todd Temple]

username-
lakefront

password-
tnorfekal123

[Tailslide]

I'd get rid of the unnecessary stuff like the navigation (top and bottom), the "print this" and "back to sales kit" links and the big "Lot information" image (replace with text).

[Todd Temple]

I'd get rid of the unnecessary stuff like the navigation (top and bottom), the "print this" and "back to sales kit" links and the big "Lot information" image (replace with text).

Um... that is all of the content that the client would like to be printed when someone clicks "Print This Page". I appreciate your help, but we cannot get rid of the "unneccessary stuff" because it is very neccessary.

[jimbo_dk]

why would the navigation be necessary on printed paper?

The ususal way to do it is to set a css file to set appropriate margins and hide unwanted areas(display:none. More here: http://www.alistapart.com/articles/goingtoprint/

[Todd Temple]

I agree that the navigation would not be necessary in my opinion, but the client would like for it to print out as close to the visual representation of the browser as possible.

So I am still right where I started trying to make the larger map image on the right column print out onto the first printed page with the rest of the content.

Any help with that situation?

Thanks...

[jimbo_dk]

I didn't try printing, but print preview doesn't show 2 pages here. I tried FF and IE7.

One thing you can try is to set margins to 0 to increase printed area on the page.

[Tailslide]

I'd have a word with the client - I know they've said that they want the printed page to look as close as possible to the screen page but you can't fit two pints in a pint jug.

Maybe explaining that getting rid of the navigation and the other unnecessary things like the "print this" and "back to sales kit" links will give more room and save printer ink for the user (which is always polite in my view!) whilst still retaining the general look of the page. Having navigation on a printed page serves no purpose except to use up printer ink.

It's more important that the user gets the information they need (the map, data, photos etc) on one page if possible than to reproduce the exact screen shot.

Personally I tend to also use a Print logo specifically for print stylesheets which wouldn't have all the background colours - just the logo itself. Again to save space and printer ink, especially on those sites with big banner images.

[jimbo_dk]

Personally I tend to also use a Print logo specifically for print stylesheets which wouldn't have all the background colours - just the logo itself. Again to save space and printer ink, especially on those sites with big banner images.

Yups. As a user I definitely do not appreciate sites that make me waste my color cartridge printing unnecessary stuff.

Once in a while you come across that out-dated client who will print-out the webpage to 'review the design'. If I'm faced with that kind of client I'd rather shoot myself in the head.