CSS Printing issue - probably a quick fix!

[MeanSEO]

I have a few websites now that have a fluid tables design in XHTML and use heavy CSS. These sites are impossible to print without a special CSS file for printing as the pages overflow of the right side and the bottom of a page.

I seem to have what I need worked in regards to suppressing what DIVs I want to, font sizes and colors and the right hand margin.

I still can’t seem to get it to continue any “overflow” onto another page to be printed.

The entire page is contained in <div id="pagecel1">
The header is <div id="pageName">
Navbar on the right (which I am suppressing) is <div id="navbar">
The website content is in <div id="content">
And the footer is <div id="footer">


The CSS I am using (not pretty) is :

#pagecel1{ margin:0px 0px 0px 1px; width: 100%; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
#content{ margin:0px 0px 0px 1px; width: 99%; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
#pageName, #footer { width: 100%; height: 15px; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }

a { text-decoration : underline; color : #0000ff; font-size : 10pt; }
h1, h2, h3, h4, h5, h6 { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
.navtitle, .navlinks {margin: 0px; padding: 0px; display : none }
.navlinkstarget{margin: 0px; padding: 0px; display : none }
.story h3{ color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt;}
adnav, #photos1, #photos2, #photos3, #navpix, #navbar { width: 1px ; display : none; }

Need to see one of the sites? Both the directories in my sig use the design.

[MeanSEO]

24 views with no responses…have I stumped the experts?

[capenancy]

I viewed one of your sites (Smoky Mountains Directory) and print preview looked fine to me.


Link tip for printing:
a:after {content: " (" attr(href) " )";}

[bj]

Most of my clients couldn't possibly care less about printing, so I seldom, if ever, use them, and can't help you. You might find the answer here though.

css-discuss.incutio.com/?page=PrintStylesheets

You might also try surfing the css-discuss archive (instructions on wiki front page) and, if all else fails, join the list ask the question on the css-d list. They're the experts, so someone will be able to help you.

[gabrielharrison]

The site that bj posted looks brilliant. I've had similar problems so will have a proper read of that.

The css content tag is a useful idea but only supported by Opera. see http://www.quirksmode.org/css/content.html

Gabriel

[MeanSEO]

Interesting links and I must now put my nose to the grindstone again. I must not be missing and obvious simple fix as no one else is seeing it either.

I have been only checking the page in FF for the past few tweaks but thnanks to capenancy I am checking it in IE and learned something new: In FF it runs won't print past page 1, but in IE it prints all the pages but it overflows on the right and cuts off some text. GRRRR!

I think I may be able to get it to work now in IE but it looks like FF might need a real tweak in order for it to work.

[MeanSEO]

Got IE to work fine! I changed the width to "width: auto;" and added in "float: none"


#pagecel1{ margin:0px 0px 0px 1px; width: auto; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; float: none}
#content{ margin:0px 0px 0px 1px; width: auto; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; float: none}
#pageName, #footer { width: auto; height: 15px; color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; float: none}

a { text-decoration : underline; color : #0000ff; font-size : 10pt; }
a:after {content: " (" attr(href) " )";}
h1, h2, h3, h4, h5, h6 { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
.navtitle, .navlinks {margin: 0px; padding: 0px; display : none }
.navlinkstarget{margin: 0px; padding: 0px; display : none }
.story h3{ color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt;}

adnav, #photos1, #photos2, #photos3, #navpix, #navbar { width: 1px ; display : none; }

Now to tweak to FF to work!

[noel_x99]

I have been only checking the page in FF for the past few tweaks but thnanks to capenancy I am checking it in IE

You HAVE to be checking in IE more often. Even though FF may be be the better renderer, it's very likely that 80-90% (or more) of your audience is using IE.

Firefox has an extension (I think it's called IE tab) that lets you click a button to switch between IE rendering and FF rendering. It's pretty cool.

[bj]

I'll warn you that the print stylesheet is the one place where FireFox has some serious problems and IE actually does it better (which is, as you know, a rarity.) The FF print problems turn up on the css-discuss list all the time.

[DrTandem1]

CSS and HTML were never meant for print. That is why web site layout confounds those experienced in print layout. The simple answer is to create the reliable printer-friendly version. You can do this with PDFs, Word, etc. You can also do it with fixed tables. However, remember that the printer-friendly version must be designed for the print medium, not on-line viewing. That means your images and graphics must be done differently than the web version.

Probably the easiest way to do this is to create your web page and then use Acrobat to convert it to a PDF.

[weegillis]

In the interest of CSS optimization, you may wish to employ something a little more abbreviated:

* {
	color:#000;
	background:#fff;
	font-family:"Times New Roman",Times,serif;
	font-size:12pt;
}
#pagecel1, #pagecel1, #content, #pageName, #footer {
	width:auto;
	float:none;
}
#pagecel1, #content {
	margin:0px 0px 0px 1px;
}
#pageName, #footer {
	height:15px;
}
a {
	text-decoration:underline;
	color:#00f;
	background:#fff;
	font-size:10pt;
} 
a:after {
	content:" ("attr(href)" )";
}
.navtitle, .navlinks,.navlinkstarget{
	margin:0px;
	padding:0px;
	display:none;
	visibility:hidden;
}
#adnav, #photos1, #photos2, #photos3, #navpix, #navbar {
	width:1px;
	display:none;
	visibility:hidden;
}

Tip: Borders can render in surprising ways. You may wish to turn them off, as well.

[capenancy]

Originally Posted by DrTandem1

CSS and HTML were never meant for print. .

Here's an article from A List Apart that talks about CSS and printing. They are all in favor of using CSS instead of offering a different print version.

[DrTandem1]

Originally Posted by capenancy

Here's an article from A List Apart that talks about CSS and printing. They are all in favor of using CSS instead of offering a different print version.

I think this is the link you meant to post:

http://alistapart.com/articles/goingtoprint/

Anyway, I didn't say it couldn't be done, I said that CSS and HTML were created for web viewing. There was no need for them before the internet for printing. Still, if you already have a web page designed, it is far easier to simply open the web page in Acrobat writer and save it as a PDF. Click, click, add a link to the PDF and you're done.

[capenancy]

Thanks for fixing the link, DrTandem1. I should have doublechecked what came out. I'm not used to posting here and got hung up on some of the other stuff and skipped checking.

I just put your quote there to show the semi-leap in topic for my post. Didn't mean to imply anything about what you said. You have a point and I just wanted to post the other so people could decide which method they wanted to go with.

[weegillis]

From what I've read about IE 7, previous printing issues have been solved, so that one can now instruct IE to 'shrink to fit.' What doe that bode for all our print style sheets? Does anyone have any experience with IE 7 in this respect?