Creating a Printable Stylesheet

Discussion in 'CSS' started by Funky Monk, Feb 8, 2005.

  1. #1
    I've created a Stylesheet to create a 'Printer-Friendly' page, which strips out all unwanted IDs and DIVS from the print page. Everything is OK, except that it doesn't remove the DHTML navigation menu.

    The print.css stylesheet is as follows:

    #body{ background-color:#FFFFFF; background-image:none; color:#000000 }
    #latestNews{ display:none;}
    #header{ display:none;}
    #header2{ display:none;}
    #horizontal_rule{ display:none;}
    #sidebar{ display:none;}
    #sidebarRight{ display:none;}
    #footer3{ display:none;}
    #anchors{ display:none;}
    #dhtml_menu{ display:none;}
    #mainContent{ width:100%;}

    The code on the page, with the 'offending' item as marked in red:

    <link rel="stylesheet" type="text/css" media="print" href="stylesheets/print.css">

    <!-- end of printable version stylesheet -->
    </head>
    <body onload="setStyle();" >
    <!--- main DHTML navigation script starts -->
    <script language="JavaScript" type='text/javascript'>
    //HV Menu- by Ger Versluis (http://www.burmees.nl/)
    //Submitted to Dynamic Drive (http://www.dynamicdrive.com)
    //Visit http://www.dynamicdrive.com for this script and more

    function Go(){return}

    </script>
    <div id="dhtml_menu"> <script language="JavaScript" type="text/javascript" src='hvmenu/exmplmenu_var.js'></script>
    <script type='text/javascript' src='hvmenu/menu_com.js'></script>
    <noscript>
    Your browser is not compatible to view the Navigation Menu. We suggest you upgrade your browser or use the text links at the bottom of the page.
    </noscript>
    </div>
    <!--- main DHTML navigation script ends -->

    No matter what I do I cannot remove the DHTML menu from the print page. Later on in the page there is another DIV (<div id="footer3">) that I use #footer3{ display:none;} for and it removes fine.

    Can anyone help me out with this. Thanks.
     
    Funky Monk, Feb 8, 2005 IP
  2. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You should use this...

    @media print{
    Place the styles you'd like printed in here...

    Anything you don't want printed, use display:none for...
    }
     
    SEbasic, Feb 8, 2005 IP
  3. Funky Monk

    Funky Monk Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Do you mean put @media print{
    etc....
    }

    in the external stylesheet or inline?

    It's not that my stylesheet doesn't work. It does, but just 1 div is left in.
     
    Funky Monk, Feb 8, 2005 IP
  4. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ah...

    Sorrry - Ignore me if your method works ;)

    Don't know how your method so can't help really...
     
    SEbasic, Feb 8, 2005 IP