Question

I’m using a jQueryUI Dialog command to popup a <p> and wish to print just the text of the <p> using the media="print" declarative

html code::

<div class="jPajxDialog">
  <p class="print">
    Some Text
  </p>
<div>

I have tried:
CSS code::

@charset "UTF-8";

body {visibility:hidden;}
.print {visibility:visible;}
.noprint {visibility: hidden;}

p.print {
  position: absolute;
  margin: 15px auto;
}

Answer 1

To hide something when printing, you should use “display: none” in css. Just keep in mind that if you make a parent “display: none”, all of his children will also NOT be displayed, even if you did a “display: block;” on the child.

You might want to review your html structure so that pieces of information that you want to hide will not be a parent of what you want to keep, that is if you want to have a cross browser compatible solution.

For example,

<div>
  <div class="noprint"> Site header </div>
  <div>
    <div class="noprint"> Site menu </div>
    <div class="print"> the content you wish to print </div>
    <div class="noprint"> Site footer </div>
  </div>
</div>

and css media=”print”

.noprint { display: none; }
.print { display: block; }