SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 35 of 35
  1. #26
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Another way to view the effects of a print style sheet in Firefox is to go to Tools > Web developer > CSS > display css by media type > Print.

    However, in this case, the inline background styles make the whole print area black, so it would be better not to have them in the html, although I don't think printers print the background anyway. Still, it wold be easier to sort out your css using firebug, but you'd have to remove the black background.

    As others have said, just use the same style sheet but set some element to display:none; and set the main divs to width: 100%.
    I did exactly that and it didn't work. I set the three main wrapper divs to 100%, set header, footer, sidebar, breadcrumbs etc. to visibility: hidden; and I get the screenshot above. Look at my code. The only thing I changed since that was the width: 100% and nothing changed. That's why I am asking here because it isn't working. Everything that isn't mentioned in the print.css file should inherit its value from the screen.css file, correct? So there's no reason to retype it in the print file unless it changed, which i did for the main divs and stuff I wanted to hide.

    There's no images, so you can download the css and html to your desktop and try it, no luck for me so far.

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by berliner_kindl View Post
    Everything that isn't mentioned in the print.css file should inherit its value from the screen.css file, correct?
    No! That's not right. If you have a print style sheet, that and only that will be called when you go to print. So it must contain all the styling for the printer.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #28
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No! That's not right. If you have a print style sheet, that and only that will be called when you go to print. So it must contain all the styling for the printer.
    Whoa, okay. Let me do that then! Thanks! They don't teach us this in PHP school haha

  4. #29
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay sweet, that got me closer. I changed all of the widths to % because px won't work for print, right? Or will it interpret it okay?

  5. #30
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by berliner_kindl View Post
    Okay sweet, that got me closer. I changed all of the widths to % because px won't work for print, right? Or will it interpret it okay?
    Hmm, you can, but it's maybe a little hit and miss. I think there's a maximum recommended pixel width, but I can't remember what it is. But then, you don't know what size users will be printing to, so I prefer to let the device decide. Perhaps something like width: 85% would be better. I haven't experimented enough with this, though I keep meaning to.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As you are modifying the existing stylesheet for print you need to set the first stylesheet to media ="all" otherwise you are not modifying anything.

    e.g.

    Code:
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="print-style.css" type="text/css" media="print" />
    Then in the print stylesheet change these rules:

    Code:
    /***********************************************************/
    /*  THIS STYLE SHEET IS FOR PRINT FRIENDLY RECEIPTS ONLY   */
    /***********************************************************/
    
    
    /***********************************************************/
    /*********** Global CSS PRINT References *******************/
    /***********************************************************/
    body{
        background:#fff!important;
        color:#000!important;
    }
    #outerwrap {
        width: 600px;
        border: 0;
        margin: 0;
        padding: 0;
        float: none !important;
    }
    #innerwrap {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        float: none !important;
    }
    #main {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        float: none !important;
    }
    .breadcrumbs {
        display:none;
    }
    #header {
        display:none;
    }
    .navbar {
        display:none;
    }
    .sidebar {
        display:none;
    }
    #footer {
        display:none;
    }
    .checkoutinfo_1, .checkoutinfo_2, .checkoutinfo_3 {
        display: inline;
    }
    Visibility:hidden just hides things but they still take space on the page but are invisible. Display:none gets rid of them altogether and they have no effect on the page.

  7. #32
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, why 600 px on the outerwrap?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Paul, why 600 px on the outerwrap?
    That was in the original and I just left it as it was as it was as it printed out ok for me. It probably should be auto but would need checking as I didn't test that.

  9. #34
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok. It would limit the size users would be printing to...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  10. #35
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, the media="all" is a great tip. I will try these after lunch today and report back. Thanks!


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
  •