Great article and making me change how our new site is formatted. However…
Like someone else in this thread I have menus on the left and removing them with display: none just leaves a blank space with the content still shifted across the page.
How do I get the content back to use the empty space to the left?
Copy & paste the code below to embed this comment.
Tony
I’ve used the similar
http://alistapart.com/stories/alternate/
alternate CSS to create a fixed point font size for printing. But both on that, and also your sample page, my IE6 continues to print as if the screen font is not changed. (NN6 is fine though). In other words, IE6 completely disregards the visible changes on the screen, although it DOES print out according to size if I use the mousewheel to resize the print.
Is this a known Win IE6 problem? Is it my setup? Is there any way round it?
Copy & paste the code below to embed this comment.
Jennifer
I cannot get the display: none to work. I’m using IE 6.0 to view my pages. I see it working on the article’s page but it isn’t working on mine. Ugh!!!!
Copy & paste the code below to embed this comment.
Terry
Hi,
First, thank you for a very good idea on print style sheets. I am a complete novice at this CSS thing so please be kind if the idea I’m about to suggest is flawed.
I created a separate print style sheet as per the article and added it to my template with the following declaration:
<style type=“text/css” media=“all”> import “styles.css”; </style> <br />
<link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” /> <br />
<br />
But I found that when I validated the CSS by URI it did so but the validator gave me warnings saying that I had several redefinitions in my CSS. Obviously the W3C validator reads both style sheets and adds them together, I don’t know. So I searched for a hack and couldn’t find anything until I came across the media tag.
Within my style sheet (styles.css) I added the following:
@media print {
/* I then cut and pasted my print style sheet into this section */
}
It worked great and validated correctly, naturally that meant I could remove the line.
So now I have a single style sheet that does two jobs. Some of you gurus may already know about this technique but I thought I’d share it anyway, plus someone may be able to develop it further.
Copy & paste the code below to embed this comment.
@m!n
While I find the solution discussed in this article interesting, sometimes you want to offer visitors more than just the same page with different looks.
Is it possible to instruct the web browser to choose a specific document when the user wants to print a page? Something like
<link rel=“printable” href=“resume.pdf” />
that basicallt says: “if the user wants to print this page, use the document resume.pdf”.
Copy & paste the code below to embed this comment.
Aaron
This is a great article but I’m working with a site currently built with tables. Most of the code has worked (getting rid of graphics, changing fonts, etc.), but my text is being cut off by the right margin of the printed page. I’m not sure if this is b/c of tables or some other problem. The content is the center column of a three column table. Left and right columns are set to display:none. Any ideas?
Copy & paste the code below to embed this comment.
schwabv
I printed this article in Safari 1.0 (v85) and the main content wrapped to a column only about 25% the width of the page. From IE, it looked fine. Is there a something in the CSS that can fix this? Or perhaps it’s a browser-bug?
109 Reader Comments
Back to the ArticleBob
Great article and making me change how our new site is formatted. However…
Like someone else in this thread I have menus on the left and removing them with display: none just leaves a blank space with the content still shifted across the page.
How do I get the content back to use the empty space to the left?
Thanks in anticipation.
Tony
I’ve used the similar
http://alistapart.com/stories/alternate/
alternate CSS to create a fixed point font size for printing. But both on that, and also your sample page, my IE6 continues to print as if the screen font is not changed. (NN6 is fine though). In other words, IE6 completely disregards the visible changes on the screen, although it DOES print out according to size if I use the mousewheel to resize the print.
Is this a known Win IE6 problem? Is it my setup? Is there any way round it?
Many thanks
Tony
Jennifer
I cannot get the display: none to work. I’m using IE 6.0 to view my pages. I see it working on the article’s page but it isn’t working on mine. Ugh!!!!
Raf
Very good article, I use tricks that explain and everithing works fine!
Aleksey
Try {display: none !important;}
Terry
Hi,
First, thank you for a very good idea on print style sheets. I am a complete novice at this CSS thing so please be kind if the idea I’m about to suggest is flawed.
I created a separate print style sheet as per the article and added it to my template with the following declaration:
<style type=“text/css” media=“all”>
import “styles.css”; </style> <br /> <link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” /> <br /> <br /> But I found that when I validated the CSS by URI it did so but the validator gave me warnings saying that I had several redefinitions in my CSS. Obviously the W3C validator reads both style sheets and adds them together, I don’t know. So I searched for a hack and couldn’t find anything until I came across themedia tag.Within my style sheet (styles.css) I added the following:
@media print {
/* I then cut and pasted my print style sheet into this section */
}
It worked great and validated correctly, naturally that meant I could remove the line.
<link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” />
So now I have a single style sheet that does two jobs. Some of you gurus may already know about this technique but I thought I’d share it anyway, plus someone may be able to develop it further.
regards,
Terry
@m!n
While I find the solution discussed in this article interesting, sometimes you want to offer visitors more than just the same page with different looks.
Is it possible to instruct the web browser to choose a specific document when the user wants to print a page? Something like
<link rel=“printable” href=“resume.pdf” />
that basicallt says: “if the user wants to print this page, use the document resume.pdf”.
Aaron
This is a great article but I’m working with a site currently built with tables. Most of the code has worked (getting rid of graphics, changing fonts, etc.), but my text is being cut off by the right margin of the printed page. I’m not sure if this is b/c of tables or some other problem. The content is the center column of a three column table. Left and right columns are set to display:none. Any ideas?
schwabv
I printed this article in Safari 1.0 (v85) and the main content wrapped to a column only about 25% the width of the page. From IE, it looked fine. Is there a something in the CSS that can fix this? Or perhaps it’s a browser-bug?