This shows how the page is displayed in a browser and how it is displayed as an Adobe PDF file, version 5.0
unless noted otherwise, all browser screens have been F11'd
1024x768, Font size set to "smaller"
|
|
| This is a screen shot of the Home Page of a Genetic Project using DNA testing. Two columns, image and link box in one, headings and text in the other. Page is designed to be flexible with choice of font size and resolution. This image is the "Small" text size. | This is how Adobe Acrobat sees the same page. Notice everything is stacked upon each other in the right column, with left column blank. Obviously Adobe is using the padding that was put into the page to allow room for the image and the link box, as the starting point for the page. The page will also be printed through the browser this way. Not a good situation. |
The problem is I want this whole site to be downloadable and printable as an Adobe PDF, once we start getting results back. How can I fix this?
Thanks to the wonders of CSS and Eric Meyer's work with it, we were able to find a solution.
It turns out that CSS allows a print style sheet to be developed and used, that does not affect the display style sheet. Both can be linked at the top of a html document through the Link declaration to tell the browser what and how to display on the screen and what and how to print. As in:
link rel="StyleSheet" href="css/dnastyle.css"
type="text/css" media="screen"
link rel="StyleSheet" href="css/dnaprint.css"
type="text/css" media="print"
In the print style sheet, I was able to remove the padding, and NOT display both the site image, and the link box through
display:none;
 |
| This is a screen shot of the Home Page of a Genetic Project using Print Preview in IE 6. Only the headings and text are printed. Adobe Acrobat will layout the same way, enabling me to offer a download of the whole site in pdf format, with clickable links, or users to print individual pages through the browser. |
Slick
Eric Meyer's discussion of using CSS to define a print style