Forum Moderators: not2easy
It works beautifully!
This follows the great solution posted by DrDoc at:
[webmasterworld.com...]
Now I am trying to modify that for a "print stylesheet".
I use display: none; for the NAV etc, and think I understand it all.
BUT, when I select "print preview" or actually print it out only ONE page prints. I added borders to the divs to see where they are in search for errors.
My print stylesheet looks like:
-----------------------
body {
background-color: #FFFFFF;
color: #000000;
height: auto;
font-size: 12pt;
margin: 0pt;
padding: 0pt;
z-index: 1;
}
/* Here go definitions of fonts for printing */
img {
display: none;
}
/* THE TWO "frames" #content and #navigation */
#content {
border: medium solid RED;
margin-left: 30pt;
margin-top: 10pt;
padding-left: 10pt;
padding-right: 10pt;
width: 400pt;
z-index: 55;
}
#navigation {
display: none;
}
#c2 {
border: medium solid lime;
margin-top: 30pt;
padding-right: 30pt;
padding-left: 30pt;
z-index: 60;
}
#copy {
border: medium solid #0033FF;
font-size: 9pt;
text-align: center;
}
html {
height: auto;
padding: 0pt;
}
#bottomnav {
display: none;
}
#page {
display: block;
border: medium solid black;
height: auto;
left: 50%;
margin-left: -240pt;
position: absolute ;
top: 0pt;
width: 480pt;
z-index: 1;
}
The html looks like:
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-language" content="en" />
<meta http-equiv="Expires" content="Mon, 24 Dec 2001 23:00:00 MST" />
<meta http-equiv="Pragma" content="no-cache" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="basic.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<div id="page">
<div id="content">
<div id="c2">
<!-- Here Goes all Content bulk text -->
</div><!-- c2 contains the content text -->
</div><!-- content is a wrapper for c2 -->
<div id="navigation"> <!-- Here Goes the NAV -->
</div><!-- navigation -->
</div><!-- page -->
</body>
</html>
----------------
Can somebody (DrDoc!?) please shed some light on my problem?
Eternally grateful!
/Jaxz
I just realized that any printing stylesheets will depend hugely upon what browser is used since the whole fixed NAV solution addresses a multitude of browsers.
The problem I described in the original post was seen when trying to print from FireFox (version 1.5.0.1). It truncates my web pages when they exceed 1 printed page...
For IE a wholly different print.css seems required. (And that is really the one I need to get working!)
Any suggestions on how to create (one?!) print stylesheet(s) that will work OK for all the browsers that the oroginal DrDoc solution supports?
Cheers,
Jaxz
