CODEWITHSUNDEEP
css
Sherry
Sherry

Reputation:

print.css is printing very small text

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?

Upvotes: 1

Views: 2867

Answers (6)

lock
lock

Reputation: 6614

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

Upvotes: 0

Tyson
Tyson

Reputation: 6244

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 
}

Upvotes: 0

Andy Ford
Andy Ford

Reputation: 8490

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

Upvotes: 0

Mike B
Mike B

Reputation: 12797

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.

Upvotes: 1

artificialidiot
artificialidiot

Reputation: 5369

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.

Upvotes: 0

Kev
Kev

Reputation: 16321

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

Upvotes: 0

Related Questions