Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS not used when printing

    I have a simple (ish) report that i produce in HTML and CSS.
    It looks just fine in the browser but when I print all of the CSS formatting is lost. I have media = all on the tag, and I have tried media="print" as well.
    Code:
    <style type="text/css" media="all">
    I have tried an external style sheet (it didn't work) but, for portability reasons, it really needs to be embedded css.

    To be clear, I don't (at this point) need different CSS for print/screen.

    Hopefully i have missed something really simple - what is it?

    I'm a real CSS noob so be gentle ;-)

    Thanks in advance

    Mark
    Attached Files Attached Files
    Last edited by markontour; 08-06-2012 at 01:36 AM. Reason: Add clarification

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I haven't attempted this myself, but a quick Google indicates that, for internal stylesheets the media attribute will be ignored. You need to specifically qualify the css rules as follows:

    Code:
    <style type="text/css">
    @media print {
      body{ background-color:#FFFFFF; }
      #heading{ font-size:28px; }
    }
    </style>
    The media attribute is intended for external style sheets:

    Code:
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,433
    Thanks
    11
    Thanked 302 Times in 301 Posts
    Looks to me like your CSS is working fine for printing. What you're missing is that background-color does not print - it's not supposed to. There may be some workarounds to this, I'm not sure, but I figure at least now you know what the real issue is

    Dave

  • Users who have thanked tracknut for this post:

    markontour (08-06-2012)

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    As you want to use the css for both screen and print then perhaps..

    Code:
    <style type="text/css">
    @media all {
      body{ background-color:#FFFFFF; }
      #heading{ font-size:28px; }
    }
    </style>
    or

    Code:
    <style type="text/css">
    @media screen, print {
      body{ background-color:#FFFFFF; }
      #heading{ font-size:28px; }
    }
    </style>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    markontour (08-06-2012)

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks guys. Both of you helped.
    As tracknut said the print was accepting the css - just not displaying the background (and the width of the page made the rest look really bad which fooled me to thinking it wasn't).
    I used @media print as suggested by AndrewGSW to chnage the rendering in print mode to make up for lack of background.


  •  

    Posting Permissions

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