Question

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?

Answer 1

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.)