Print stylesheet not working?

Question

So, I'm taking a web design class for the first time and my professor told us to use a specific print stylesheet for our website. I want it to hide the header and navigation bar specifically (footer, headings, etc too), but I cannot seem to get it right. The navigation bar is the 'cssmenu' in the code below by the way, not , which is throwing me off. This site is for educational purposes (i.e. copyright free use), so please do not criticize how I set up the code because I'm new to this. Please help if you can.

My site is: http://tiger.towson.edu/~kmoore25/Proj_3/Welcome.html

Anyways, it's not working and it worked for another site I did. By not working, I mean the elements that I am trying to hide are still visible when trying to print. This is the template that I was told to use:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text color to black (useful for light text on a dark background) */
.lighttext
{
color: #000 
}

/* Improve color contrast of links */
a:link, a:visited
{
color: #781351
}

This is how I tweaked it:

@charset "UTF-8";
/* CSS Document */

body {
    font-family: Georgia, serif;
    background: none;
    color: black;
}
#page {
    width: 100%;
    margin: 0; padding: 0;
    background: none;
}
#header, .cssmenu, #footer, .noprint {
    display: none;
}
.entry a:after {
    content: " [" attr(href) "] ";
}
#printed-article {
    border: 1px solid #666;
    padding: 10px;
}

h1
{
color: #000
}

h2
{
color: #000
}

a:link, a:visited
{
color: #781351
}

Keep in mind that I'm new to website. Lastly, this is the html for one of the pages on my site so you can see how it doesn't work. I removed the paragraphs and stuff to condense the code so that you can better understand it because I doubt that's the problem:

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OITNB - Piper Kerman</title>
<meta name="keywords" content="html, responsive, grid, css, web design" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/drop_down.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type='text/javascript' src='js/drop_down.js'></script>
</head>

<body>
<div class="page">
  <header align="center"> <a href="Welcome.html"><img src="images/oitnb.jpg" alt="OITNB" width=""/></a> </header>
  <div id='cssmenu'>
    <ul>
      <li class='has-sub'><a href='#'><span>About the Show</span></a>
        <ul>
          <li class='active last'><a href='synopsis.html'><span>Synopsis</span></a></li>
          <li class='active last'><a href='piper.html'><span>The Real Piper Kerman</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Seasons</span></a>
        <ul>
          <li><a href='season_one.html'><span>Season One</span></a></li>
          <li class='active last'><a href='season_two.html'><span>Season Two</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Cast</span></a>
        <ul>
          <li class='active last'><a href='season_one_cast.html'><span>Season One</span></a></li>
          <li class='active last'><a href='season_two_cast.html'><span>Season Two</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Pics</span></a>
        <ul>
          <li><a href='posters.html'><span>Posters</span></a></li>
          <li><a href='fan_art.html'><span>Fan Art</span></a></li>
          <li><a href='thumbnails.html'><span>Thumbnails</span></a></li>
          <li><a href='gifs.html'><span>GIFs</span></a></li>
        </ul>
      </li>
      <li class='active'><a href='contests.html'><span>Contests</span></a> </li>
      <li class='active last'><a href='contact.html'><span>Contact</span></a></li>
    </ul>
  </div>
</body>
</html>

Have you used @media print { ... } in your css file? – amol Jun 28 '14 at 11:34 — amol, Jun 28 '14 at 11:34

score 1 · Answer 1 · edited Dec 17 '14 at 23:27

This is about finding the right CSS selectors in your CSS file that match the elements, ids or classes in your html, which you want to change:

Compare your selectors in the CSS file (#header, .cssmenu, #footer, .noprint) to the ids, classes and tags in the html.

Your html has a header tag without id. Then the CSS selector needs to be "header" without '#' or '.'.

Your html has id='cssmenu'. Then the CSS selector needs to be "#cssmenu".

#footer and .nopint in your CSS refer to elements in your html which have id='footer' or class='noprint'. These seem not to be used at the moment.

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

You need to use a media query to stop the element from showing up when printing. Something along the lines of this should do the trick.

@media print
{
    /* Remove unwanted elements */
    #header, #nav, .noprint
    {
        display: none;
    }

    /* Ensure the content spans the full width */
    #container, #container2, #content
    {
        width: 100%; margin: 0; float: none;
    }

    /* Change text color to black (useful for light text on a dark background) */
    .lighttext
    {
        color: #000 
    }

    /* Improve color contrast of links */
    a:link, a:visited
    {
        color: #781351
    }
}

This question should give you more detailed information.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 28 '14 at 11:37

Semirix

271
3
13

Thanks a lot for not just directing me to another question. I thought that the solution would be difficult because the print stylesheet template looked so simple (so I thought maybe the code was wrong), so that's why I posted this question. I appreciate your help! – user3078712 Jun 28 '14 at 17:39
It didn't work btw. Should I post more of the code?? – user3078712 Jun 28 '14 at 17:45
1

What exactly isn't working? This code wasn't supposed to be copied verbatim, but to serve as an example of how you should go about fixing your problem. – Semirix Jun 29 '14 at 05:09

Print stylesheet not working?

2 Answers2