1

I have this code at http://www.canadaiplawyer.com/ in the hope that the printed version of the website would not have the shadow around the main (paper) div:

@media print{
  #content, #endpage, #startpage {
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
  }
}

Is there a reason why this is not working and I still get the shadow when printed?

KatieK
  • 13,586
  • 17
  • 76
  • 90
Uno Mein Ame
  • 1,060
  • 5
  • 16
  • 29
  • chance to be overwritten, try !important. – Riz Oct 18 '11 at 07:58
  • 1
    Take out `@media print`so that you can see it in regular browser to see if it actually takes out the shadow. You might have to move this to the very bottom just to be sure that it would work if it works. – Joonas Oct 18 '11 at 08:01
  • @Dev: Overwritten here could mean that the selector may have lower specificity (http://www.w3.org/TR/CSS2/cascade.html#specificity). I tried: `@media print { * { box-shadow: none; } }`, but it didn't work because the selector I had when specifying the shadow (`.myClass`) was more specific than a wildcard (`*`). `!important` helped. – TWiStErRob Feb 02 '13 at 02:44

2 Answers2

11

I looks like the shadow is actually set on #nonfooter, not on #content. You probably want to use:

@media print{
  #nonfooter {
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
  }
}

Also, make sure the @media tag comes after all the normal declarations, to ensure it has a higher specificity. (If it is in a different CSS file, put the <link> tag after the normal one.)

OverZealous
  • 39,252
  • 15
  • 98
  • 100
  • 1
    Oh, I should have mentioned - this is why we have tools like [Firebug](http://getfirebug.com/) - it lets you analyze the live page. It was trivial to see where the shadow was in the CSS this way. – OverZealous Oct 18 '11 at 08:02
  • thanks. i just noticed this following Lollero's comment, and have fixed this. I'm so mad. It seems so simple and stupid. Thanks anyway! – Uno Mein Ame Oct 18 '11 at 08:06
9

Used important. This code below are a standard for print style sheets.

/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
Mike Vierwind
  • 6,889
  • 3
  • 15
  • 9