The "display: none;" goes in the css file you are using to display the PRINT version. If you put it in the version used to display on screen, then it will not show up on screen (although they will be able to find it if they look at the source).
The solution by raygorcha uses the same file to display both on screen AND in print. This is OK, but it means you cannot change the appearance in one without affecting the other, which is why I suggest creating the second file.
If you look at the link above to xrat's post, you will see his code. There is a section in the first code block that looks like this: /**** elements to hide ****/
#header,
#nav,
table.ticketoptions,
#content div + table, /* SCP tabber after ticketthread */
.Icon, /* all icons */
input.button, /* all buttons */
img, /* all images */
input, /* all input fields, checkboxes, etc. */
#reply /* client reply */
{ display: none; }
All tags listed there will not display in the printed version, for example there is img, so nothing between tags will be displayed. Where you can see #reply, this is not targetting tags, but rather tags such as .
So, if there are several fields you want to hide, I would suggest adding #hideInPrint, to the top of the list. Then when you find the code you want to hide, surround it in tags. Now when it is on screen it will appear, and when it is on print, it will not.
In short, the "display: none;" is already there - you just need to apply it.
