How Do I Hide Screen Elements When a Page Is Printed?

It's often useful to hide certain elements when a page gets printed. For example, your Navigation Menu, or a Search button are usually pretty useless on paper.

In the old days, this was often implemented with a separate "printer friendly" page. A big disadvantage of this solution is that you need to create two pages; one normal page, and a page that just displays the content you want to be printed. This means updating two pages whenever the content or the design of your site changes.

But did you know you can use some CSS to hide screen elements you don't want to display when the page gets printed? Modern, standard compliant browsers support embedding a style sheet specifically for print media. Whenever a page gets printed, the browser first applies the normal style sheet and then this print sheet. This means you can use the print sheet to override or extend the style sheet info from your normal sheet.

Inside that style sheet you can define a special class (like NonPrintable or any other name you choose) that hides the elements you don't want to appear on paper. Alternatively, you can also override the behavior for your other classes so they are hidden when printed. CSS information defined in the print style sheet will take precedence when the page is printed. Consider the following example that hides an HTML form button when the page is printed:

<html>
<head>
  <title>Non Printable Stuff</title>
  <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css">
  <link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
</head>
<body>
  <input type="button" value="I am hidden" class="NonPrintable">
</body>
</html>
As you can see, two style sheets are linked in the <head> section. One is used for ordinary, on-screen style stuff. The other has been marked with media="print" which means it is only used when the page is printed. To actually hide the button when the page is printed, you'll need to add the following definition for the NonPrintable class in the second style sheet (PrintStyle.css):

.NonPrintable
{
  display: none;
}

In the print style sheet, you can also hide other elements like your menu, header, footer or whatever it is you don't want to be printed:

.NonPrintable, #Menu, #Footer
{
  display: none;
}

You can use this trick in combination with a reversed, .PrintOnly class that only outputs stuff when the page is printed. This can be useful to display the full address of hyperlinks, for example.

Besides the separate style sheet, you can also use embedded style sheets with the media attribute, like this:

<html>
<head>
  <title>Non Printable Stuff</title>
  <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css">
 <link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
  <style type="text/css" media="print">
.NonPrintable { display: none; }
</style>
</head>
<body>
  <input type="button" value="I am hidden" class="NonPrintable">
</body>
</html>

If you want a running example of this, click the "Print this Page" in the Details section in the upper left-hand corner of this page. When you print the page, or request a Print Preview in the browser to save some trees, you'll see that all the navigation stuff, the logo and buttons are hidden. In addition, you can see a box at the end of the article with some details like the full URL of the article. This helps people to reconnect a printed document to its Web version at a later stage.


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Tuesday, January 04, 2005 2:36:42 AM Chris Gurney said:
Thnaks for the excellent article - wasn't aware stylesheets could do that.

I tried to wrap a div tage class=noprint around this scripting so the menu won't print. Worked great in IE but Mozilla igonored it though Mozilla worked properly when around text etc. Thanks ..Chris

<snip> Rest of the code was cut by Imar Spaanjaars</snip>
On Friday, March 10, 2006 10:53:29 AM ramakrishna k said:
thanks
this code is useful for me..but how i can hide background of the page while printing
On Sunday, March 12, 2006 3:05:41 PM Imar Spaanjaars said:
Hi ramakrishna,

In most browsers (that I know off), background images are never printed. So, if you have a background-image set up in CSS, it won't be printed.

If you want to hide other images, set up a special print class that changes the behavior for the image, like the NonPrintable class in the example above.

Hope this helps,

Imar
On Saturday, January 06, 2007 12:03:13 PM Me said:
"In the old days, this was often implemented with a separate "printer friendly" page. A big disadvantage of this solution is that you need to create two pages; one normal page, and a page that just displays the content you want to be printed. This means updating two pages whenever the content or the design of your site changes."

Ever heard of PHP or ASP? When content is already seperated from layout updating content will automatically result in an update of ALL pages that use the seperate content.

No serious website still uses static webpages in 2007.

On Saturday, January 06, 2007 1:07:18 PM Imar Spaanjaars said:
Hi there,

You're completely missing the point here. Of course I know about ASP, PHP, ASP.NET and so on and I am fully aware of the possibilities to separate design and content. I never mentioned static pages (although you'd be surprised by the number of static pages / sites I run into).

However, with that idea in mind, and the "old days" I had in mind, you still had two separate pages: the normal page, and the printer friendly page. In many cases, the printer friendly page contained the same data access code (possibly through an incudes) as the main page, but lacked other includes for the menu, footer and so on. But even with server side technologies, two pages means two pages. Need to update one because you rename an include file, you need to update the other as well. And yes, you could use a single page that forks depending on whether it should be printed or not, but the idea is all the same.

In the solution I am proposing in this article, this is no longer an issue; there's a single page that changes its appearance based on the media it's used on; either screen or printer....

Cheers,

Imar
On Tuesday, February 06, 2007 11:11:07 AM varathan anantharaj said:
i have IE5. i m try to workout this code . but it does not work in my screen  pls help me
On Tuesday, February 06, 2007 11:34:11 AM Imar Spaanjaars said:
Hi varathan,

Not sure why this wouldn't work. AFAIK, the media attribute is supported in IE 5:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/media_1.asp

Cheers,

Imar
On Tuesday, February 06, 2007 12:20:12 PM Imar Spaanjaars said:
Hi varathan,

Sorry for the errors you got; you're not allowed to post HTML here.

Anway, you may need to reread the article. You're using:

  style="NonPrintable"

while you should use:

  class="NonPrintable"

Cheers,

Imar
On Tuesday, February 06, 2007 12:25:14 PM Imar Spaanjaars said:
Hi varathan,

Sorry. *I* just reread the article and noticed a  bug. I had style="NonPrintable" instead of class="NonPrintable". I updated the article....

Funny that 3517 people never noticed this.... ;-)

Imar
On Tuesday, February 06, 2007 12:47:20 PM varathan anantharaj said:
Dear guy,

again lot of thanks to U for consider my feed back..

again one problem appear to me ...
rigtht now i changed style to class .
but the button does not appear the front page.

i want to only does not appear on print preview.

On Tuesday, February 06, 2007 12:58:22 PM Imar Spaanjaars said:
What you posted worked for me:

[style type="text/css" media="print"]  
  .NonPrintable
    {
      display:none;
    }  
[/style]
....

[label class="NonPrintable"]End of the Report [a href="adrsearch.do?"]... [/label]

Cheers,

Imar
On Tuesday, February 06, 2007 1:00:38 PM VARATHAN ANANTHARAJ said:
hello sir,

i receve mail from ur website. then i checked this page . but no solution here. i wait for ur reply .. thanking you sir.
On Tuesday, February 06, 2007 1:17:10 PM Imar Spaanjaars said:
Hi VARATHAN,

Please STOP posting HTML on this page. You can't do that and you'll only get errors.

The code you *try* to post every time works for me, as I said earlier. If it doesn't work, it must be a browser issue. I suggest you Google a bit and see if other people have the same issue.

Imar
On Tuesday, February 06, 2007 1:22:44 PM varathan said:
thanks sir,

i use ur source code . but still now i didnt solve my problem sir.

the button doesn't appear the page .

On Tuesday, February 06, 2007 1:25:14 PM Imar Spaanjaars said:
Sigh.... That's what I am telling you. It works for me, so it' not a code issue, but (I think) a browser issue.

Want to fix the problem??? http://www.getfirefox.com

Imar
On Tuesday, February 06, 2007 1:29:21 PM varathan said:
dear imar,

lot of thanks to u... ok  .. i will try to solve my browser problem.. thanking you for ur co-operation
On Tuesday, February 06, 2007 1:34:24 PM varathan anantharaj said:
hello sir,

now this is perfectly working in my browser..
really i m very happy sir.
thanking very much..


........all the best ....
On Monday, February 12, 2007 2:55:26 PM Marc said:
Hey Imar,

You are so helpfull with comments like "Sigh.... That's what I am telling you. It works for me.","Please STOP posting HTML on this page. You can't do that and you'll only get errors." and "Funny that 3517 people never noticed this"...

I just understood the meaning of your name: Imar"etarded"...

Cheers,
Marc
On Monday, February 12, 2007 4:54:19 PM Imar Spaanjaars said:
Hi Marc,

I don't think your comment is fair nor true. I could simply delete your comment, but instead I'll reply to prove you're wrong.

There's a lot of stuff that I can see that you can't. Varathan has posted another 10 or 20 messages that generated errors. Each time the error message told him not to post HTML, but he continued to post the same stuff over and over again. I also received a number of other private messages from him.

Regarding those 3517 users: don't you think that's funny? The article has been on-line for 1.5 year with a *major* bug that everyone, including me, completely overlooked. Yet the article received a number of 5 star ratings.... I think that's funny.... ;-)

So, all in all, I don't understand your negative response. If you don't like it here, then please don't bother to come again. The world and my site is better off without types like you.....

Imar

Oh, BTW, I rolled back 16 out of your 17 1 star ratings for the article. One rate per person is more than enough, don't you think?
On Friday, February 16, 2007 3:30:48 AM Osama said:
I have three DIVs in my page Header(in the top), Menu(sidbar to the right) and Content(to the left of Menu) if I put in my prt.css this
.NonPrintable, #Header
{
  display: none;
}
It works (Good)

but if I put in my prt.css this
.NonPrintable, #Header, #Menu
{
  display: none;
}
All DIVs will be HIDDEN ??? (Why)
On Friday, February 16, 2007 6:45:13 AM Imar Spaanjaars said:
Hi there,

Hard to tell without seeing the rest of the code. Is the remainder of the page wrapped inside the #Menu div? That would explain why the rest gets hidden as well.

If that doesn't help, I suggest you post your code and problem on a forum like http://p2p/wrox.com where it's easier to post code....

Cheers,

Imar
On Thursday, March 08, 2007 7:08:54 AM Mahendra Sahu said:

If I click on print button then it will get hidden but after printing that page button should be displyed .

That button should not be hidden permanently.

On Thursday, March 08, 2007 7:41:56 AM Imar Spaanjaars said:
Hi Mahendra,

That's exactly what this article is about. Try it out by requesting a Print Preview. You'll see that much of the screen stuff disappears, including the Print this Page link at the top of the page.

Imar
On Tuesday, March 20, 2007 3:38:20 PM Sharon said:
Hi Imar,

Do you have any thoughts to hide the master page content when you just need to print the content page. Thanks!
On Tuesday, March 20, 2007 6:05:31 PM Imar Spaanjaars said:
Hi Sharon,

In the browser, there is no difference between a Master Page and a Content Page; all there is is the full HTML for the entire page: the combined markup for the master and content page.

So, the same principe would apply to .NET master / content pages: apply the NonPrintable class attribute to elements you want to hide. You can do this with elements both in the master page as in the content page.

Cheers,

Imar
On Monday, May 21, 2007 8:45:43 AM MeeR said:
Hi Imar,
I've tested both IE 7 and Mozilla. Is the code only working Mozilla because it is not working in IE 7. Even your example "click the "Print this Page" in the Details section in the upper right-hand corner of this page" working in Mozilla but not working with IE7. Do you have any idea how to make this function work on IE.

Thanks
On Monday, May 21, 2007 9:31:59 AM Imar Spaanjaars said:
Hi MeeR,

Are you saying you can't print this current page without the menu and other stuff? When I right-click the page in IE7 and choose Print Preview I get a print preview of just the main article, without the menu, side bar and comments. Isn't this what you're seeing?

Imar
On Monday, May 21, 2007 11:53:29 PM MeeR said:
It can print without the menu and other stuff but the header, footer, page number and the printed date is printed in the paper with IE. If I used Mozilla it is perfect the page will be printed without header, footer.......

Do you have any idea how to remove this header, footer .....in IE using CSS.

Thanks.
On Tuesday, May 22, 2007 5:51:12 AM Imar Spaanjaars said:
Hi MeeR,

Ah, now I see. Right, this is something that IE displays there by default. Individual users can remove the settings using the print setup dialog, but this is not something you can control with CSS as a developer.

Search the web for terms like "header footer internet explorer print CSS" and you'll find other solutions involving ActiveX and registry writing to work around this in an Intranet scenario.

Imar
On Wednesday, July 25, 2007 2:02:28 PM Sara said:
This was a very helpful article. One thing though, (and it's really small) in the article you said "If you want a running example of this, click the "Print this Page" in the Details section in the upper right-hand corner of this page" and when I view this page in IE it's in the upper left hand corner. I was looking for a button in the right hand corner and I just now found what you were talking about. no biggie, just thought you should know.
On Wednesday, July 25, 2007 2:09:27 PM Imar Spaanjaars said:
Hi Sara,

Good catch; have fixed it now. Thanks.

I wrote this article when I still had my old design that did have the button in the upper right-hand corner. When I updated my design, I never realized I mentioned it in one of my articles.....

Cheers,

Imar
On Wednesday, July 25, 2007 7:51:09 PM Sara said:
Oh one more thing,

Also mentioned in the article is the use of .PrintOnly to only show something when the page is printed. I understand the concept but I don't know what code to put in my style sheet. I have two separate style sheets: one used for viewing online and one for printing. Which do I add the .PrintOnly class to and what code do I actually put? Something to do with the visibility or display tags?

Thanks much!
On Wednesday, July 25, 2007 8:19:30 PM Imar Spaanjaars said:
Hi Sara,

Like I mentioned in the article, .PrintOnly is the reverse of .NonPrintable. (Note that the names are arbitratily chosen).

So, in the normal style sheet you could have something like this:

.PrintOnly
{
  display: none;
}

Then in print style sheet (with its media attribute set to print) you can have something like this:

.PrintOnly
{
  display: block;
}

This hides stuff on screen, but shows it in print.

Cheers,

Imar
On Thursday, September 27, 2007 8:39:05 PM Mohd said:
Hi,

I am in same boat as the guys who tried to hide some info in print. I could not hide the Page number (Page 1 of XX) and the page url which is printed at the bottom of the page.

Please could you help. I used #header, #footer ... but it did not work.
On Thursday, September 27, 2007 8:55:39 PM Imar Spaanjaars said:
Hi Mohd,

Please read the comment I posted on 5/22/2007 7:51:12

Cheers,

Imar
On Tuesday, December 18, 2007 4:45:13 AM Gene said:
Hi Imar,

I would like to see the created HTML file from the SharePoint 2007 because I could not open my ASP file from this SharePoint (some conflicts between them).

I will run my ASP page daily from the command prompt and this ASP will create a HTML file on the server side because my customer is interesting to view that HTML file from his SharePoint 2007.

Is it possible to "hide" entire ASP page with its result during run-time, so user will not going to see it? Which parameters should I use in my ASP file to "hide" the actual ASP page, which is "poping up" during the run of each CALL command from command line?

Thanks in advance.
On Tuesday, December 18, 2007 7:20:23 AM Imar Spaanjaars said:
Hi Gene,

How is this related to hiding parts of a document when printing it using CSS - the topic of this article?

Imar
On Tuesday, December 18, 2007 12:36:22 PM Gene said:
Hi Imar,

I am sorry if I did something wrong.
I posted my question in this topic because I thought that I can get help from you on how to "hide" the ASP page and I am also using CSS file.
I could not find other place on your site where I can get an answer.
If you can not help then please remove my question from this article.

Sorry and Thanks again.
On Tuesday, December 18, 2007 12:42:24 PM Imar Spaanjaars said:
Hi Gene,

No problem. But, this site is NOT a support forum. If you have a question about the article, feel free to post it here. However, I don't see the relation between this article and SharePoint 2007, pop-ups, calls from the command line etc.

I think you're better off posting this on a forum like http://p2p.wrox.com

Cheers,

Imar
On Tuesday, December 18, 2007 12:44:28 PM Gene said:
Thank you Imar.
On Friday, May 23, 2008 8:13:11 PM salman said:
Hi I used the code but I am getting the whole URL in my page footer. Is there any way to hide that URL from priting?

Please help me out.

Thanks
On Friday, May 23, 2008 10:50:36 PM Imar Spaanjaars said:
Hi there,

Not without resorting to weird client-side tricks that ill only work in an Intranet environment. This is a browser setting, not a page setting.

You may want to offer your users a PDF version of the page for printing instead.

Cheers,

Imar
On Tuesday, July 15, 2008 7:09:20 PM Michael E. said:
This article was very helpful.  

I don't know much about CSS. Using the information that you posted enabled me to print out the contents of my content placeholder without the information from the Master Page. That was exactly what I needed.  I was wondering if there was a way that I could always hide all button and link button controls in my content placeholder by default without having to add the class="NonPrintable" to the markup of each button and/or link button?

I am sorry if this question is obvious to those who are familiar with CSS.  I can't seem to get it working.

Am I correct that I only need to apply my 'printer friendly' css file in my master page instead of each of my indiviual web pages?

Thanks
On Tuesday, July 15, 2008 7:50:59 PM Imar Spaanjaars said:
Hi Michael,

You can hide elements by tag name as well. For example:

input
{
  display: none;
}

would hide all input elements like buttons, text boxes etc.

Where you need to place your CSS depends on your page layout. The master page is indeed a good place. However, there may be times where you have specific pages (like a popup) without a master page. In that case, you could put the print style sheet directly in the content page.

Basically, the printer friendly style sheet follows the same rules as "normal" CSS does...

Cheers,

Imar
On Tuesday, July 15, 2008 8:09:38 PM Michael E. said:
Thanks for the extremely fast response.  Is there any simple way of only applying the:

input
{
  display: none;
}

to the buttons and not the textboxes? I need to be able to hide buttons and Link buttons, while printing out textboxes, labels, gridViews.... etc.

Thanks again.
On Tuesday, July 15, 2008 8:22:04 PM Imar Spaanjaars said:
Hi Michael,

You're welcome. You can do something like this:

input[type=text]
{
  ...
}

However, browser support isn't too good for it. Take a look here: http://cf-bill.blogspot.com/2005/05/styling-all-input-typetext-webpage.html and search Google for

  CSS and input[type=text]

for more ideas and info.

Note, the article is quite old. IE 7 now supports this, provided you have a valid doc type in your page:
http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=283

Cheers,

Imar
On Wednesday, July 16, 2008 1:18:00 PM Michael E. said:
Thanks. As usual you have been a big help.
On Monday, September 22, 2008 3:51:10 AM Kenny K said:
I have tried your above example and it works fine for Other browsers, except for IE.
For some strange reason hided elements are displaying in print preview under IE. The 2 elements that are showing in IE are dynamically generated menus. It's an .asp page. It looks like its rendering again in print preview.  Can anyone suggest work around for this?

see sample code below:

[%
  If navJS [] 2 Then
     response.write writeNews
  Else
     response.write "[a href=""/news_media/index.asp""][img alt=""News, Media & Cams"" src=""/images/global/spacer.gif"" width=""1"" height=""1"" border=""0""][/a]"
  End If
%]

and

[%
response.write writeTable
%]
On Monday, September 22, 2008 8:59:54 AM Imar Spaanjaars said:
Hi Kenny,

Not sure why it doesn't work for you as I don't see (non) print related code in this example.

One way to work around it is to hide the stuff by default when the page first loads, and display it at the client. That way, it remains hidden when printed.

Hope this helps,

Imar
On Tuesday, November 08, 2011 12:10:30 PM Niha said:
Hi,

This is a very useful article. Thanks for the information.
I want to know what you have placed in the javascript when you call click the print link. I checked the view source and the function you call is "DoPrinterFriendly". Can you tell me what exactly you code in this function?
On Tuesday, November 08, 2011 1:43:51 PM Imar Spaanjaars said:
It used to do more, but now it just call window.print:

function DoPrinterFriendly()
{
  window.print();
}

Cheers,

Imar
On Wednesday, November 09, 2011 10:20:20 AM Niha said:
Thanks a lot for the javascript reply.That was very quick.
I do have one more question though. I have implemented the print.css and my page looks good. my other question is, some of my forms have tabs - say 3 tabs using panel. But, when i click the "Print Page" which is placed on the first tab, i need it to print all the 3 tabs.

How do i proceed in this issue? Is there a way I can set in CSS for the tabs to print ?

Let me know if I am not clear...
On Wednesday, November 09, 2011 10:22:45 AM Imar Spaanjaars said:
You can do the reverse and assign a class that's only visible in the print style sheet. E.g.:

.PrintOnly
{
  display: block;
}

or whatever you use to hide the tabs.

Imar
On Wednesday, November 09, 2011 10:37:45 AM niha said:
Imar,

Thanks for the reply. I am using ASP.NET for my development and I use asp:multiview tag and then use asp:view tag for the tabs. the tabs are formed automatically when we use the structure. I do not use any css code currently.

How do I use CSS to display all the tabs in the print document? What changes do I need to make in print.css.

Hopw I am clear.
On Wednesday, November 09, 2011 10:41:33 AM Imar Spaanjaars said:
Yes, you're clear, but it's a bit too much for me to cover here.

Try posting it on a forum such as http://p2p.wrox.com.

Cheers,

Imar
On Wednesday, November 09, 2011 10:45:00 AM Niha said:
Imar,

Thanks.I will post in the suggested forum. Thanks a lot.
On Wednesday, January 04, 2012 6:33:52 AM risdiyanto said:
thx
On Monday, January 23, 2012 10:21:35 PM Lars said:
Thank you. I have been looking for this :)
If I would like to ask you something about php or html or javascript sometime would that be okey?
On Thursday, March 01, 2012 12:40:08 PM Maddy said:
Is there a way to make un ordered list bullet points invisible when print button is clicked? for instance I have unordered list of print and notprint options when I click print option I was able to hide/disappear  notprint text but that little bullet point is still i there, that bothers me is there a way to fix that or is that not possible, any ideas would be much appreciated..thanks much..
On Monday, March 05, 2012 9:58:32 AM Imar Spaanjaars said:
Hi Maddy,

You can set the list-style-type in your CSS file for print to get rid of the bullets.

Cheers,

Imar
On Tuesday, March 06, 2012 7:38:45 PM Maddy said:
yup I have tried..setting list-style-type to none and assigned the ul li item to that css class..still that bullet shows on print button click..,
On Tuesday, March 06, 2012 7:52:23 PM Imar Spaanjaars said:
Hi Maddy,

That should work, so something else must be going on. Can you post your full HTML along with the CSS stylesheet on the Wrox forum at

http://p2p.wrox.com/index.php?referrerid=385

Then I'll take a look.

Cheers,

Imar
On Monday, February 04, 2013 3:38:41 PM ravi said:
i have a hyperlink data  on my page and when click the print button the page displays with hyperlink and when click on that hyper link opens another seesion.So i want hide that link on print page
On Monday, February 04, 2013 4:39:13 PM Imar Spaanjaars said:
Hi ravi,

>> So i want hide that link on print page

And isn't this article showing you exactly how to do this?

Cheers,

Imar
On Wednesday, February 06, 2013 10:01:28 AM Ravi said:
Hi Yes i couldn't found the solution for this,could you please help us on this.
On Wednesday, February 06, 2013 12:08:29 PM Ravi said:
a:link {background-color:white;cursor:text;text-decoration:

I tried with this how ever the link is not appearing but when we click on the text it opens a new window.
On Wednesday, February 06, 2013 12:45:12 PM Imar Spaanjaars said:
I don't understand what you're not getting. This article shows you how to include a print style sheet, and how to hide elements from being printed by including display: none; in that print-specific style sheet. What do you not understand, what are missing and what exactly are you trying to accomplish?

Imar
On Friday, March 08, 2013 10:12:46 PM Ghazi almgbool said:
GREAT JOB, Imar Spaanjaars
Thanks a lot for helping
thanks again Dear.
On Tuesday, March 19, 2013 10:39:38 AM ravi said:
we have an issue when we click on the "print this page" button then the application opens the same page and having a print button when click on print it prints the data.There is no issues with this.
Only the outstanding issue here was when it opens another page there we are seeing the hyperlinks and when we click on that link
it opens the new page.So we need to hide that hyper link to prevent clicking on the print page
On Tuesday, March 19, 2013 2:38:36 PM Imar Spaanjaars said:
I still don't get it but since you're talking about "the issue was", I assume it's now resolved.

Cheers,

Imar
On Friday, August 02, 2013 1:36:32 PM On demand printing said:
Very useful and so helpful post. The way you have explained the concept of hiding screen elements is just effective. I am happy that I am on your site and gained so much knowledge.

http://www.thebookpatch.com/
On Tuesday, April 12, 2016 3:06:08 PM Jayesh Jayakumar said:
Hello Imar,

I have an issue while hiding a particular div.

I have a side navigation bar ([aside] [div id="sidebar"] [ul] [/ul][/div] [aside]) and next to it I have a section containing a div which acts like a box with image. ([section] [div] img src="abc" [/div]).  On printing , I have to hide the side bar.

I added the class "Nottoprint" to the sidebar div and set it as display: none (@media print { #sidebar{dispaly:none;}}). On priting, the side bar is getting hidden, but along with it the next element i.e. the section with image is also getting hidden.

Can you please help me on this issue.
On Tuesday, April 12, 2016 9:16:17 PM Imar Spaanjaars said:
Are you sure the item is not nested inside the one you're hiding?

Imar
On Wednesday, April 13, 2016 5:19:19 AM Jayesh Jayakumar said:
Hello Imar,

Thanks for the reply. The issue as mentioned above was not related to div hiding. It was related to width of the div. I have got it worked now.

But I have a query now, I want to hide the header (id="headerWrapper") and footer (id="footerWrapper") of the page as well . I tried to hide it by specifying the id and setting display as none. But it didn't work.
On Wednesday, April 13, 2016 7:08:06 AM Imar Spaanjaars said:
It should work, so either something is not being applied, or something else is overwriting your settings. Hard to say without seeing the full page online somewhere.

Cheers,

Imar
On Wednesday, April 13, 2016 9:20:31 AM Jayesh Jayakumar said:
Hello Imar,

I tried applying the above logic to the div, but its not working. layout is as follows

[body]
[div class="inner-wrap"]
[header id="headerWrapper" class="site-header"]
[div class="site-header-div1"]
[div class="site-header-logo"]
[a href="/"]
[img class="site-logo" src="//path/for/logo"]
[span]Go to home page[/span]
[/a]
[/div]
[/div]
[div class="header-body"]
[div class="header-action"]
[div class="user-action"]
[ul class="user-action-list"]
[li]a[/li]
[li]b[/li]
[li]c[/li]
[/ul]
[/div]
[/div]
[/div]
[/header]
[/div]
[/body]

I want to hide the "header"
On Wednesday, April 13, 2016 9:34:15 AM Jayesh Jayakumar said:
I am using the following css style for hiding the div

@media print {
#headWrapper{display:none !important;}

.site-header-div1{display:none !important;}
}
On Wednesday, April 13, 2016 9:45:29 AM Imar Spaanjaars said:
Like I said, this is hard to say without seeing the full page online somewhere.
On Monday, April 18, 2016 11:58:06 AM SHital said:
I am printing a page in which I have included 3 images as a button icon and also I have set the background color. While printing in print preview i change the properties i.e., I have selected  Background Graphics because i need background color printed. But the issue is coming now browser is nopw selecting all 3 icons too. If I set display:none the buttons get hide
Any one have the solution
On Monday, April 18, 2016 12:46:38 PM Imar Spaanjaars said:
Not sure I understand the problem; this would require a bit more background and a URL to a live site.

Cheers,

Imar

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.