Advanced Search

CSS: Printer Friendly Header Visibility Styles

/ Published in: CSS
Save to your folder(s)
When developing a website, an important consideration is accessibility on other media, including the medium of print. However, the printing engines of most browsers render content differently to allow for simple printed pages. One of the most notable differences is the omission of background images by default in modern browsers' print output. Background images are commonly used for header elements, which causes missing branding in the resulting printed pages.

One option defined in this snippet is to add markup after your normal header for a 0 pixel by 0 pixel `` element (your print version header), and then style the two headers as invisible and visible based upon the stylesheet medium. So when you're viewing the screen version of the page the normal header will be visible and the print header will be an invisible element with a width and height of 0 pixels. With the print version of the page the normal header will not be displayed at all and the print header will be a visible element that is floated and correctly sized.

This solution has been tested to work in:

* Microsoft Internet Explorer 6, 7, 8
* Mozilla Firefox 3.6
* Google Chrome 5
* Apple Safari 4
* Opera 10

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. This solution applies to a header pair defined as follows:
  2.  
  3. <div id="header-normal">...</div><img id="header-printer-version" src="/location/to/your/print-header.jpg" width="0" height="0" />
  4.  
  5.  
  6. You can specify your different media stylesheets as follows:
  7.  
  8. <link rel="stylesheet" href="screen-style.css" type="text/css" media="screen, projection" />
  9. <link rel="stylesheet" href="print-style.css" type="text/css" media="print" />
  10.  
  11.  
  12.  
  13. screen-style.css
  14. ==========
  15.  
  16. #header-normal {
  17.   display: block;
  18.   width: 800px;
  19.   height: 220px;
  20.   background: url(/location/to/your/normal-header.jpg) no-repeat;
  21. }
  22.  
  23. #header-printer-version {
  24.   float: left;
  25.   width: 0px;
  26.   height: 0px;
  27.   visibility: hidden;
  28. }
  29.  
  30. print-style.css
  31. ================
  32.  
  33. #header-normal {
  34.   display: none;
  35. }
  36.  
  37. #header-printer-version {
  38.   float: left;
  39.   width: 600px;
  40.   height: 150px;
  41.   visibility: visible;
  42. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.