print.css is printing very small text

Question

My print.css pages are printing out very small, super reduced and the text is like 6 pt.:

@charset "UTF-8";
/* CSS Document */

body {
   background: white;
   font-size: 12pt;
   /* Change text colour to black (useful for light text on a dark background) */
.lighttext
    color: #000 
}
/* Remove unwanted elements */
#menu, #header, #nav, #prod, #home, #our, #work, #whole, #contact, #circle, #logo, #flower, #navblank, #bottom, .noprint
{
display: none;
}

#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.alistapart.com" attr(href) ") ";
   }

Do not understand why - does anyone have any suggestions to correct the output of this print.css?

Answer 1

What about an absolute value for font-size (instead of 90%) just to rule that out?

Answer 2

I changed 90% to 12 pt and it did not improve the tiny printing. Thanks for the idea. Any other ideas?

Answer 3

Check if is there is any script that modify inline styles, forgotten CSS that applies to all types of media. Try adding !important. Then check your printing options. If it is something like shrink to fit, then there is not much you can do in CSS. Also try printing with alternative browsers, maybe that will diagnosing.

Answer 4

As pt stands for points being 1/72th of an inch I would hazard a guess that it may be down to screen size, although in reality it could be any number of things. We'd really need more information.

Have you tried using em's instead? They're the best way of dealing with font sizes.

Answer 5

Perhaps you have another stylesheet that is being loaded when printing? What does it look like in Print Preview?

It's possible you have another stylesheet that you don't intend to be loaded for printing but is being loaded for printing anyway. Check the 'media' attribute:

something like this will be loaded on screen or in print: [link rel="stylesheet" href="css/style.css" type="text/css" media="all" /]

so will this: [link rel="stylesheet" href="css/style.css" type="text/css" /]

And of course this is for print only: [link rel="stylesheet" href="css/print.css" type="text/css" media="print" /]

To keep a stylesheet from being loaded for print, use something like this: [link rel="stylesheet" href="css/print.css" type="text/css" media="screen, projection" /]

(NOTE: use angle brackets, not square brackets as I have above. Somehow 4 space indenting is not working for me)

More about media attribute types

Answer 6

You're missing a } to close your body declaration:

body {
   background: white;
   font-size: 12pt;
   /* Change text colour to black (useful for light text on a dark background) */
}
.lighttext
    color: #000 
}

Answer 7

try pressing ctrl+0 you might have unknowingly reduced the font size on browser-side