Forum Moderators: not2easy

Message Too Old, No Replies

Specific Printing and DIV inheritance Problem

I need to stop the inheritance of a parent DIV to it's child DIV(s)

         

hippostarz

10:25 pm on Sep 28, 2006 (gmt 0)

10+ Year Member



Does anyone know how to stop the inheritance of a parent DIV to it's child DIV(s)?

Here is a basic example of what I am trying, but isn't working... I am trying to wrap the entire page in the "entirepage" DIV, then only print the "printable" DIV (stripping the page of it's table formatting).

<style>
@media print{
#entirepage {display:none;}
#printable {display:block;}
}
</style>

<DIV id="entirepage" style="display:none;">

Dooooooooon't print me!

<table width="770">
<tr>
<td width="200">

Side Navigation - dooooooooooon't print me!

</td>
<td width="570">

<DIV id="printable">
Printable content goes here!
</DIV>

</td>
</tr>
</table>

</DIV>

-------------------

The result of this is that it prints nothing... I need printable to print.. minus any surrounding HTML that is necessary.

Anyone got any ideas?

bedlam

10:38 pm on Sep 28, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Does anyone know how to stop the inheritance of a parent DIV to it's child DIV(s)?

The Visual Formatting Model [w3.org] of the CSS Spec is a good place to look ;-)

Specifically, if you check the display [w3.org] property, you'll see that you're going to have to re-think how you accomplish this; "display:none"

... causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.
[Emphasis in original]

There are a couple of other ways to achieve what you're after though:

  1. Attach a class with a name like 'noPrint' to the elements you will never want to print, then add something like "@media print { .noPrint {display:none;} }" to your stylesheet, or

  2. Attach a unique id attribute to each component of the layout that you will never want to print and add something like "@media print { #foo, #bar {display:none;} }" to your stylesheet. This option is generally preferable to the first since you will likely need ids on various elements for styling in the first place.

-b