Hidding Menus when printing - {SOLVED}

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
mcooledge
Beginner
Beginner
Posts: 9
Joined: Mon Sep 19, 2005 2:56 am

Hidding Menus when printing - {SOLVED}

Post by mcooledge »

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: Select all

<head>
	<style type="text/css">
	@import url(CSS/index.css);
	
	@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: Select all

<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: Select all

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
mcooledge
Beginner
Beginner
Posts: 9
Joined: Mon Sep 19, 2005 2:56 am

Re: Hidding Menus when printing

Post by mcooledge »

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: Select all

<head>
	<style type="text/css">
	@import url(CSS/index.css);
	
	@media Print {
	.menu, .image, .login, .bottomofpage {
	display: none;
	}

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