Posted By

karlhorky on 07/08/10


Tagged

css header width image visibility headers style print hide styling screen img banner hidden height media styles banners visible printer friendly printerfriendly medium projection


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

sethetter


CSS: Printer Friendly Header Visibility Styles


 / Published in: CSS
 

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 <img> 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
  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  

You need to login to post a comment.