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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Print Css problems

    I am creating a print css for http://74.52.63.159/~dbolton/
    since the images at the top are white they will not print, so i had to recreate them in black......
    on the index page I am declaring the two images

    Code:
    <img src="Site/themed_images/h1White/UNIQUE PROGRAM OF IP REPRESENTATION_h1W.png" alt="Unique Program of IP Representation"
     style="z-index: 1; position: absolute; top: 30px; left: 31px; right: 386px;" />
     <img id="black" src="Site/themed_images/h1Black/UNIQUE-PROGRAM-OF-IP-REPRESENTATION_h1B.png"alt="Unique Program of IP Representation"
     style="z-index: 1; position: absolute; top: 30px; left: 31px; right: 386px;" />
    and then in my screen stylesheet (styles.css) i have taken out the black image
    Code:
    #seo_1 h1 #black{
    display:none;
    }
    But in my print.css i have declared
    Code:
    #seo_1 h1 #black{
    	display:inline;
    }


    but when i go to print this page the image does not display......?
    any ideas would be much appreciated, i have been banging my head against the wall over this print stylesheet...
    Thanks again!

  • #2
    New Coder
    Join Date
    Apr 2010
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    One thing I would suggest to check is the order that you're calling the stylesheets in. If you are not declaring a 'media' type on your non-print stylesheet make sure you're calling the print.css after your main one.

    That might be the cause but it's the first thing that came to mind
    BIOSTALL.com - Web Development Snippets, Hints and Tips

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Do not know if it is a problem, but your image is named in uppercase letters it is best to always name images in lowercase letters for servers to read.

  • #4
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    The whole point of print styles is to get rid of the unnecessary cruft and suchlike. Dumping images like that into the output classifies as unnecessary cruft. If an image is necessary to keep context, use it. If not, (which that is not), dump it. People with inkjet printers will love you for ramming crap like that into a print version. An image of that type uses five times plus more ink than the comparable text version.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Sbolton, you definitely have to apply a “media” attribute to the other stylesheets, too, or, as said earlier, move the print stylesheet after the regular ones if you don’t apply the above mentioned attribute, otherwise the regular stylesheets are overriding the print styles.

    And yeah, I would hate you for wasting my printer’s ink for an image that adds no value to the information I’m going to print. That book kind of image has no relevance for those that are going to print the page, it’s purely decorational.

  • #6
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the replies.... I actually just used a combo of z-index and display none.
    Stephen/matt- I understand what you mean by the graphic next to the text not needing to print ( and that is how it was originally done) but it was a request from the client, so my hands were tied..


  •  

    Tags for this Thread

    Posting Permissions

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