[thelist] Printing a div?

[Aylard JA (James)]

Karen,

> Is it possible to print just the contents of a div?

		There are two approaches that I can think of, one
user-initiated and the other developer-initiated:

1. User-initiated approach
	This is currently IE-only AFAIK. You can select the desired portion
of a page by clicking and dragging your mouse over it. Then you can either
right-click and select "Print" from the context menu or you can choose
"Print" from the File menu. In in the print-setup dialog, choose "Selection"
from the "Print range" section. When you press "OK", only the selected
portion of the page will print.

2. Developer-initiated approach
	This is possible using style sheets (CSS2), and is IE4+/Netscape 6
only. The most cross-browser compatible approach is to link to an external
style sheet and use the media="print" attribute in the link element, such
as:

<link rel="stylesheet" 
   type="text/css" 
   media="print"
   href="Style.css">

	This will work in all of the aforementioned browsers. Alternatively,
you can use the media="print" attribute on a style element:

<style type="text/css" media="print">
   /* style declarations... */
</style>

	This is not supposed to work in IE4, however. The last approach is
to use the @media rule, which is the most flexible because it can be
intermingled with other style declarations:

<style type="text/css">
   div { font-weight: bold }
   @media print {
      div { background-color: #ff0000 ;
   }
</style>

	Again, this will not work in IE4, but does work in IE5+ and Netscape
6.
	What you can do, in your print style sheet, is set the display
property of all elements other than your div to "none", and set your div's
display property to "block". You could also use the visibility property, but
this could create blank areas around your div since setting visibility to
hidden still reserves space for the element in the document.

hth,
James Aylard
jaylard at equilon.com