SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with alternate style sheet for printing

    Hi,

    I have created an alternate style sheet for http://www.riventreewoods.com/ordering.htm which includes #navBar #relatedLinks .noprint { display: none; }

    Yet if you look at the print preview for this page, I clearly still get a navBar and relatedLinks sections. What am I missing?

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try:

    #navBar, #relatedLinks, .noprint { display: none; }
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Added the commas and still get the unwanted sections in the print preview.

  4. #4
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Sure you didnt mean to use globalNav instead?

    #globalNav{
    display: none;
    }
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the navBar is the the column that is on the left of the page and is what I want to get rid of in the printout.

  6. #6
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    1) Try:

    Code:
    visibility: hidden;
    display: none;
    2) Does anything else work in the stylesheet? If not, it may be a problem with the browser reading the stylesheet and not the code itself. I just recently wrote my first print CSS stylesheet and I thought I was coding it wrong. Turns out I had a browser issue instead. It had something to do with using the LINK tag (never did find out what the issue was). The code below worked for me:

    Code:
    <style type="text/css">
        @import url("/css/screen.css") screen, projection;
        @import url("/css/print.css") print;
    </style>
    Try removing your regular stylesheet and see if your print stylesheet works. If so, try the syntax above as an alternative to using two LINK tags.

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I had another idea for printing pages the other day, which I thought I'd share. I've already started to add it to my site.

    I used it as I have alot on my page that I wouldn't want to print. It's only a line of javascript, so wont work without it. It's good because it doesn't use any of the styling thats done externally. You just document.write all the divs you want to print, which puts them on a page of their own.

    Code:
    function printablePage(){
    document.write(document.getElementById("headerDiv").innerHTML+document.getElementById("mainDiv").innerHTML+document.getElement("footerDiv").innerHTML)
    }
    or you can use document.getElementsByTagName("body")[0] if you want to print the whole page.

    I've put a function on my site if you want to see it working. It's quite a neat way of doing it
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Oslo, Norway
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the "alternate stylesheet" setting for your print.css and set it as "stylesheet" - since it's not an alternate stylesheet, it's just a different media which you've specified correctly in the media attribute.

    And fix the typos in the <link> tag.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having trouble with this. What do you mean by the typos in the <link> tag? Seems like no matter what I do I get the extra stuff I don't want on additional pages.

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still get 3 pages to print rather than the desired one. Can anybody else give me some tips?

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

    It shouldn't be an alternate stylesheet. Its a stylesheet with media="print" set (as mentioned in an above post).

    You have also missed out the quites around text/css so the browsers probably wouldn't recognise it anyway.

    Code:
    <link rel="stylesheet" href="http://www.riventreewoods.com/2col_leftNav2.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="http://www.riventreewoods.com/print.css" media="print" />
    That should get it working so you can now fiddle with the code to make it work as you want

    Paul


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
  •