Hidding Menus when printing

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:29

Hidding Menus when printing - {SOLVED}

Poster: mcooledge
Dated: Wednesday September 19 2007 - 23:03:56 BST

I am trying to remove the menu when I print.
Below is the CSS code that I am using and if removes every thing but the menu.

Code:

<head>
   <style type="text/css">
    __at__ import url(CSS/index.css);
   
    __at__ media Print {
   .menu, .image, .login, .bottomofpage {
   display: none;
   }
   .wrapper{
   background: #FFF;
   border-style: none;
   width: auto;
   }
   * {
   color: #000 !important
   }
   }
   
   </style>   

   </head>

then in the body i have the menu in a div tag

Code:

<div class="menu">
      <!--Use to make the menu center above the wrapper-->
         <script type="text/javascript" src="JavaScript/milonic_src.js"></script>
            <script type="text/javascript">
                  if(ns4)_d.write("<scr"+"ipt type=text/javascript src=JavaScript/mmenuns4.js><\/scr"+"ipt>");
                    else _d.write("<scr"+"ipt type=text/javascript src=JavaScript/mmenudom.js><\/scr"+"ipt>");</script>
            <script type="text/javascript" src="JavaScript/menu_data.js"></script>
   </div>

Here is the menu class from the Index.css

Code:

DIV.menu
{
    DISPLAY: block;
    MARGIN: 15px auto 0px;
    WIDTH: 760px;
    POSITION: relative;
    TEXT-ALIGN: center;
   padding-left:20px;
}
* HTML DIV.menu
{
    PADDING-RIGHT: 0px;
    MARGIN-TOP: -1px;
    DISPLAY: inline;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN-LEFT: -5em;
    WIDTH: 100%;
    PADDING-TOP: 0px;
    POSITION: fixed;
}

I would like to thank you for the help in advance. If i cannot remove it i can live with it. It just takes up space when i print.

Mark

Re: Hidding Menus when printing

Poster: mcooledge
Dated: Wednesday October 3 2007 - 16:38:03 BST

I found out what i was doing wrong. in the code below where display:none i needed to add "!important" like this "display: none !important;"
With that it has priority of previous instructions.

[code]
<head>
<style type="text/css">
__at__ import url(CSS/index.css);

__at__ media Print {
.menu, .image, .login, .bottomofpage {
display: none;
}

I hope that this might help someone who is using CSS in their code.

Industrial Strength JavaScript and DHTML Menus

Hidding Menus when printing - {SOLVED}

Re: Hidding Menus when printing