printer friendly page with print(css) doesnt work

[m_lardenoye]

hi

working on this website
www.jadf.nl

i have inserted a print button( left side) and some coding, but nothing works.......


within the html file :


<div id="print" class="jadf">
<link href=" print.css" rel="stylesheet" type="text/css" media="print">
<img src="/print_bl.gif" width="22" height="15"></div>

the css print is the following:

* {
padding: 0px;
margin: 0px }

body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px; }

.jadf {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;}


#tekstbox {
width: 80%;
color: #000000;
text-align: left;
margin: 0px;
padding: 10px;
overflow: visible;
position: absolute;
top: 0px;
left: 10%; }


#header, #menu, #uitdraai, #footer {
display: none; }



-------------
anybody know whats wrong?
thanx
m.

[ihoss.com]

thats not how it works. You add the print css line (the link tag) it the head part of the page, right under the other link tag. Then when you print the page, it looks different. Have a look at the print preview in your browser.

[m_lardenoye]

i changed the code to the header

blablabla
<link href="style.css" rel="stylesheet" type="text/css">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
</head>

print.css is unchanged. but nothing happens......

i mis the actual "when you click on this print icon, you need to go display the page with print.css" action.....

this is my print.css
* {
padding: 0px;
margin: 0px }

body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px; }

.jadf {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;}


#tekstbox {
width: 80%;
color: #000000;
text-align: left;
margin: 0px;
padding: 10px;
overflow: visible;
position: absolute;
top: 0px;
left: 10%; }


#header, #menu, #uitdraai, #footer {
display: none; }

[ihoss.com]

if you want it to display on the screen, then you would need to implement a new page which only imports the print.css file. But you don't have to do that, because if someone prints the current page, then it will printed as if the normal stylesheet was missing and only the print.css stylesheet was there. In firefox or IE, go to file>print preview. Thats what your page will be printed like.