Print CSS Q...
- Started
- Last post
- 5 Responses
- BusterBoy
I have a div in my main page CSS that I only want to display when printed. So I have set it to display:none in the main CSS but set the same div to display in the print.css file.
For some reason the DIV doesn't display in the printed version. Am I missing something here? Is it not possible to hide a DIV in a page but have it display in print?
- ETM0
Code Sample? Links?
- BusterBoy0
In my main CSS I have an element that I don't want displayed contained within
#content {
display: none;
}In my print.css I have
#content {
width: 450px;
font-Size: 11px;
text-decoration: none;
text-align: left
}
- Akiraprise0
When you display print.css are you still including the other css file? if so you'll need to make the display: block or whatever in the print.css file as it's currently just combining the 2
- Stugoo0
your print css is like adding any other css file. the previous styles affect the elements
printers dont really like floats so try setting float:none on all floated elements and setting display:none to all unneeded elements.
the questions you need to ask yourself are:
'why would someone print this page?'
'what exactly do I need on this page?'
'what can i get rid of?'remove all usess content ...
p.s
the best way to test them is to print to pdf.
- zr0
The best way to do this (less server requests) is to have a @media block in your main css file, it also works a bit more intuitively.
@media print {
/* styles for print goes here */
}Remember to include both media when linking the css.. like:
<link rel="stylesheet" type="text/css" media="screen, print" href="print.css" />I find the quickest way to test print styles is to 'print preview'.
- link example would not be print.css, would be a single stylesheet...zr