rmurphey

Fixing width issues with IE6 print stylesheets

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

• ... 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.

Further reading:

• Ease the Pain with IE6 Printing
• CSS Design: Going to Print

These are just some notes; interested in hearing other's tips!

1 comment

Leave a comment...