Using a print.css file to target something on a long page

HTML & CSS
1

Hi,

I’m having slight difficulty creating a print css solution that prints only a certain section of the page (in this case, a coupon). The difficulty comes from the fact that I’m using WordPress. The WordPress theme obviously has a structure something like the following for posts:

<html>
<body>
<div id="wrapper">
<div id="content">
etc.

What I want to isolate for printing is in a table within that structure. Something like:

<html>
<body>
<div id="wrapper">
<div id="content">
<table>
<tr><td><div id="print"><WHAT I WANT TO PRINT>
etc.

What can I do to hide everything else except ‘print’ div here? If I make my print.css stylesheet something like –

div {
      display:none;
}
#print {
      display:block;
}

– it hides the ‘print’ div because the div is within the wrapper div of the theme (which obviously starts in the header.php file of the WordPress theme and ends in the footer.php file of the theme). If I use visibility:hidden on the body like this –

body {
       visibility:hidden;
}
#print {
       visibility:visible;
       position:absolute;
       left:0;
       top:0;
}

– I can actually make just the print div appear, but because hiding the rest only hides it and doesn’t remove it from the structure, the printer spits out two more blank pages after the print div because the actual post that the coupon is in has a lot of other content!

So what can I do to just isolate that print div for printing and hide everything else (and also not have the printer spew out a bunch of blank pages to go with it)?

Would really appreciate your thoughts. Thanks.

2

Pretty much you’re going to have to manually list every single element that has content in it, that isn’t print… otherwise you’re just fighting the “cascading” part of CSS. The moment you nab it’s parents with a massive outer selector… it goes away regardless of it’s own setting.

3

wipes brow Okay, done. That worked. Three lines of print exclusions and a bunch of new empty classes created inline, but that works :). Thanks.

4

Shouldn’t have needed THAT many – since you nab a parent you nab all it’s kids – but I guess that really hinges on what you were omitting.