Fixing width issues with IE6 print stylesheets

By Rebecca | January 2, 2008

categories: css

Note to self: remember to use !important when trying to deal with text running off the page in print versions of pages in IE6.

Basic steps to follow:

EITHER have separate print and screen stylesheets ...

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

... OR declare separate screen and print rule sets in a single stylesheet

 
@media print {
  #foo {
    display:none;
  }
}
 
@media screen {
  #foo {
    display:block;
  }
}

Put the content that you do want printed in containers that you can easily target with a CSS rule. Then, in the print css, display:none all the siblings of the containers that don't need to be printed. It may take a little trial and error to get the lists of printing and non-printing elements right, but well-designed, semantic HTML can make this task easier. Long story short, if you can display:none a parent element, you don't need to also display:none its children. The flipside of that is that if you do display:none a parent, you can't then display:[anything] children elements to get them to show up.

To deal with IE issues, give a fixed width to the containers you do want printed, and make the width !important:

 
#content {
  width:400px !important;
  /* 400px seems to work well
  if you want to span the width
  of a letter-sized page */
}

Also to deal with IE issues, you may find it useful to put some padding-right on your p elements.
If you have print rules that are required for IE but break things in other browsers, use a conditional comment to include the rules in a separate stylesheet.

blog.rebeccamurphey.com Adventures in front-end consulting