SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: CSS for Print

Hybrid View

  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for Print

    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.

  2. #2
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Advice

    Hello,

    Just encapsulate your CSS print style within the following tag:

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


    Compuwhiz7

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by S7even
    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.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, in the end the browser has the last laugh I assume you set-up a page dimension within the CSS for printed media.

  7. #7
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Panama
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  9. #9
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Panama
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you hear me kicking myself all the way up there in Kansas? Thanks.

  10. #10
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easily done. I hope it now works correctly.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  11. #11
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •