#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    235
    Rep Power
    15

    Printing HTML - styles in print CSS ignored


    Hi, I've got a webpage that I need to print almost exactly as it appears on the screen.

    Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is:

    @page {size: A4 landscape;}

    however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}.

    The two style sheets look like this:

    for the screen:
    body {..... etc etc all works fine...

    for the print:
    @page {size: A4 landscape;margin:3cm;}
    body {.... etc ALMOST same as above

    the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape.

    What am I doing wrong, or am I completely misusing the @page and media commands?

    Thanks in advance.
    Andy
    Time isn't wasted if you're wasted all the time
  2. #2
  3. a rootin', tootin', shootin'
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Feb 2004
    Location
    location.href="hame"
    Posts
    3,475
    Rep Power
    100
    you need to do this:

    Code:
    @page
    {
         size: A4 landscape;
         margin:3cm;
    
         body
         {
              .... etc ALMOST same as above
         }
    }
    you see, the print media styles need to go inside the @page block, not come after it

IMN logo majestic logo threadwatch logo seochat tools logo