Print.css -- hidden elements are printing

this hasn’t happened to me before, a month or two ago I posted about this issue here, I had never done it before, but with the help I got here I was able to do my print-css fine…

now on a diff website, elements I have hidden (display:none) are printing!! (if I try visibility:hidden they also print…) this did not happen to me at all w/previous project… also made width of main element wider (since no sidebars) but they print, as mentioned, with the sidebars, and main content area width is not what I specify in print.css…

I hope I don’t have to post a url… it would take me a long time to convert all content to dummy content… at any rate here is my print.css code:

[FONT="Courier New"]body {background-color:#fff;
	font: normal 14px arial, helvetica, sans-serif;
	margin:30px 0 0 0 ;

body * {/*border:solid 1px red; */ float:none;  position:static; }

#header #util,
#header form,
#footer ul,   /* PRINTS */
a#c_linkNext,  /* PRINTS */
#resources {
div#sidebar_left,				/* PRINTS */
div#sidebar_left div#callouts_left,  /* PRINTS */
div#sidebar_right,				/* PRINTS */
div#sidebar_right div#callouts {	/* PRINTS */
	background:#F09;  /* FOR TESTING -- they print, but don't see bg....  */

body.hcp #header {

body.hcp #logo {
	background: url('../images/logo_print.gif') no-repeat;
#container #container_inner,
#content div.special {
	padding: 0;
	/*border:solid 1px green; */

#content p {

#content p img.inpageChart {
	margin:0 auto;

#content .tableWrapper table {

#content h2 {

#content #safety h2 {

h2.ind_sub {visibility:hidden; }

#footer {
	padding: 0 0 44px 0;

#footer .legal {

oh my gosh – pls disregard… I was doing the wrong thing when testing (no way to remove a posting – only edit…)

I was turning print.css to media “screen” to test on the screen, then hitting ctrl-p from there, I guess it was ignoring print.css b/c I had it set for “screen” – oh brother… well, learned a valuable lesson… sorry for the post… I can’t remove it…

Well, you seem to have found the solution. If you ever need help to get your post removed.

In future you should click the orange ‘Flag Post’ icon to the right of your green-light circular status icon/light thing and fill-in the box and submit.

It will get the attention of one of the Moderators who can edit the post on your behalf.

In most cases, especially if the OP is diligent in posting how he fixed his own issue, no matter how silly an error there was, the post should be left in place. After all, if one person can make a silly error, maybe two others can, and if each of those brings two silly-mistake making friends …

A dumb mistake is only dumb after you’ve fixed it. Give the next guy an opportunity for a face-palm moment.



thank you Gary…

actually, I do have an issue:

on long pages only first page prints, then 2nd page is blank page… like bottom of first pg will be half an image, and ugly stuff like that… this thing doesn’t know to skip over to next pg to keep images wholesome?? :wink: and why does it only print first page, then 2nd page nothing?

thank you…

If you know where you can safely do a page break without it looking stupid, then you can use the page-break-before or [url=]page-break-after CSS rules :slight_smile:

Usually that means that you’ve positioned or floated a large content element, and that has a tendency to stuff up the printing - a lot of the time, positioned and floated elements will just cut off at the page break.

Another tip - get rid of width:840px; … two reasons.

1- measuring the size of something in pixels only makes sense when you’re talking about on-screen display. Printers don’t use pixels. Measurements for print can be set in points, em, cm, inches etc - ie, physical measurements that the printer can really understand.

2 - just let it fill the width that’s available. Different people’s printers have different page margins set, and depending on whether they’re using A4 or Letter paper, you’ll either find that some people have a load of space down the side of the page or others have content cut off as the printer runs out of space.

oh brother… it’s LOTS of pages… would have to do manual pagnation for each one… there’s no other way?? oh man oh man…

I don’t like “width that’s available” at all… often I print “printer-friendly” pgs and – for ex a newspaper article – , it will fill entire page, no margins at all, I find that very ugly… but are you saying that this might solve pagination problem? to manually paginate all pages would be major overkill…

thank you…

it will fill entire page, no margins at all, I find that very ugly…
Print margins are a user defined property. Have you checked your own settings?



Life would be so much simpler if Firefox and Chrome got working on supporting page-break-inside:avoid; - after all, even IE8 is starting to support it, and Opera has been making it work since about the sixteenth century…

That’s really only a problem for pictures. In general, getting rid of positioning and floating should improve things.

oh brother… more and more issues… b/c some of the pages have tables and/or images (data bar-charts, etc…) but I put page-break before… I have header-imgs above tables, they were printing BELOW the table… so I hid them, had to do text-hdr for table-headers… all well and good, but now have discovered an IE problem: and that is that when printing in IE only half (or less) of the page is printed… like it’ll print <tr><th>…</th>…</tr> for a table on one page, then, even though there’s plenty of room left on the page, the rest of the table is on next page, same thing with plain text… it paginates too early, bottom half (& sometimes more) of the pages are empty… is there a solution please… again, this particular problem only occurs when printing from IE

thank you…

You’ll need to give us a live link to the page, to get into that kind of detail…

actually I solved that one… the footer, for some odd reason, was printing above all other content, so I put position:static and it fixed it, which is weird, b/c for this print stylesheet I have body * { float:none; position:static; } but oh well, whatever works at this point…

but now have new issue:

for long tables that go across more than one pg figured out how to print table-headers (top row) on 2nd page of table ( <thead>… then in css

 thead {  display:table-header-group;  } 

but this is working only when print from FF, not IE… :frowning: would appreciate any solutions… thank you very much…

actually now IE does print table-hdrs on 2nd page…

but Safari doesn’t… IE and FF does, but not Safari… (why would it work in one Mozilla browser, but not in another?)

would appreciate any suggestions…

thank you…

I have a guess, and it may be waaay off…

if you’ve resorted to body * {float: none; position: static;} then I start to think your print stylesheet is way overcomplicated. And inheriting from your screen stylesheet.

Even though a browser will load all stylesheets whether showing them or not (computers not hooked up to printers will spend time downloading a print stylesheet), as a developer I’d rather have my print stylesheet start from 0 and possibly re-create CSS from the screen stylesheet (table styling and the such) than have it inherit everything from screen and you then have to “undo” all of it.

Since nothing’s floated or non-static positioned by default, one does not have to state no floats or positioned anythings on the page. This may help with printing.

And after that, browsers do still screw things up: IE misprints the top borders of fieldsets. Firefox treats each new fieldset like a float (each one gets its own piece of paper and what a waste!). But I think a stylesheet that starts from 0 (no styles) and builds only what’s necessary for print might solve many other problems.