CSS for Print

[S7even]

How much control can CSS give on the way a page is printed out?
I tried to print a page that I created using a print style sheet (using pt instead of px etc) but the browser adds its own margins, a header and a footer. Each browser can do whatever it wants .. for example Opera removes the borders.

Is there any way to overwrite these browser defaults?

Also, although in the preferences of IE6 I see that it will put 0.75in margin on each side, it seems that the left margin is twice as big than the right one.

[Tygger2512]

You need to level the playing field by setting margins, padding, borders etc. in the CSS for the body tag in your Print stylesheet.

e.g.

body {
  margin: 0;
  padding: 0;
  border: 0
}

This should clear any default margins etc. that the browser uses. You can then start to add the margins, padding and borders that you do want to your tags.

Andy.

[cfm]

Hello,

Just encapsulate your CSS print style within the following tag:

<style type="text/css" media="print">
/*...*/
</style>

Compuwhiz7

[S7even]

As i said I have already created a style for print.
But setting margins and padding to 0 doesn't seem to overwrite the browser default for margins when printing.

[Tygger2512]

setting margins and padding to 0 doesn't seem to overwrite the browser default for margins when printing.

These are set in the Page Setup function of the browser. You cannot set them from your CSS.

Andy.

[xhtmlcoder]

Yes, in the end the browser has the last laugh I assume you set-up a page dimension within the CSS for printed media.

[earthsusan]

Hi there, here is another somewhat related question regarding setting print styles. The website I am working on has a right column menu with images as a href links. When you try to print this page the images are pushed over on top of the middle #content div. I have tried creating a seperate print.css to that has #right {display: none} with the hopes that this would take out the images when the page goes to print but what I get instead is the images moving to the bottom of the page. Any suggestions as to what I am doing wrong? The website is: http://www.thepanamaconnection.com
The style sheets appear in the header as:
<link rel="stylesheet" href="templates/panamaconnection.css" type="text/css" media="screen">
<link rel="sytlesheet" href="templates/print.css" type="text/css" media="print">
Let me know if you would like to see either of the css files. Thanks. Susan

[Tygger2512]

You're going to kick yourself when you read this - you have misspelled stylesheet in your second link, so the stylesheet is probably not going to be applied. I checked the source code to make sure - you have transposed the 'y' and the 't'

Andy.

[earthsusan]

Can you hear me kicking myself all the way up there in Kansas? Thanks.

[Tygger2512]

Easily done. I hope it now works correctly.

[Tygger2512]

Susan,

There is another problem now. When I Print Preview your page in Mozilla Firebird 0.6.1 the larger bold text, overlays the normal text. The problem doesn't appear in IE 6.0 though.

Andy.

Edit:


ignore that - it was a rendering problem with the Print Preview. There is still one slight problem though. The paragraph next to your image has the ends of the words on the right cropped. If you could replace the table with a <div> and float the image on the left it would probably get rid of this problem.