Hide JScript Menu Using CSS Media=print

Forum Moderators: open

Message Too Old, No Replies

Hide JScript Menu Using CSS Media=print

Trying to hide a JScript-based menu using CSS Media=print

AmRes

3:09 pm on Mar 20, 2011 (gmt 0)

I'm trying to develop a CSS for print media. Everything is working fine except for hiding my jscript-based menu.

In my 4-HHP_Print.css file, I have the following definition:


.Nav {
 display: none;
 }

My ASP file has:


<DIV CLASS="Nav" ID="Nav">
<script type='text/javascript'>
 function Go(){return}
</script>
<script type='text/javascript' src='/hvm/mnu.js'></script>
<script type='text/javascript' src='/hvm/menu_com.js'>/script>
</DIV>

However, the menu still shows up.

Is there a way in HTML without using CSS to detect the output media type? I was thinking that I could then use a conditional include for the jscript.

TIA
/rick

tedster

4:11 pm on Mar 20, 2011 (gmt 0)

Hello AmRes, and welcome to the forums.

.Nav defines a class. Because you are using an ID you may also need to define #Nav. I think that "specificity" rules are causing the ID to override the class.

To answer your direct question - no, HTML doesn't have that kind of functionality. It's basically about content and semantics, not presentation.

AmRes

8:18 pm on Mar 20, 2011 (gmt 0)

Thanks for the response. I had already tried that. I've been searching and testing for a couple of days now. Nothing that I've seen recommended anywhere works. (Running Firefox 3.6.15)

Just for grins, I fired up IE 6... hiding the jscript works just fine. Now I'm thinking it the way I have Firefox configured. Hmmmmmmmmmm

tedster

9:51 pm on Mar 20, 2011 (gmt 0)

What's the code are you using to call the file 4-HHP_Print.css?

AmRes

10:13 pm on Mar 20, 2011 (gmt 0)

<HEAD>
.
.
.

<LINK REL="STYLESHEET" HREF="/CSS/4-HHP_Print.css" REL="stylesheet" TYPE="TEXT/CSS">

.
.
.
</HEAD>

I think I may have a configuration issue with Firefox since the CSS works fine in IE6.

swa66

2:30 pm on Apr 11, 2011 (gmt 0)

You can actually combine the print and the normal stylesheet into one file.

in the html:
<link rel="stylesheet" type="text/css" href="/style.css" />

in the style.css:

#Nav {...}
...
@media print {
#Nav {display:none;}
h1.title {padding:0;} /* just as an example */
}
...

Now a lot depends on what your javascript does (it can reset the display properties to something else e.g.)

Also do take extra care with specificity.