Question

I have a web site I am working on where I have a ‘print page’ button. When the page prints, I
want to hide certain elements of the page (e.g. left hand nav, top nav, etc…).

I have added this to my style.css:

@media print {
  #topnav { display:none }
  #left-col { display:none }
}

However, when I go to look at the print preview of the page, those elements are still there.

Any help would be much appreciated!

Answer 1

I figured it out. It was a coding error on my part. My original link to my stylesheet
looked like this:

<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />

and was causing a conflict. Once I removed media="screen" it worked perfectly.