Trouble with a stylesheet

Forum Moderators: not2easy

Message Too Old, No Replies

Trouble with a stylesheet

joe1182

12:02 am on Dec 22, 2004 (gmt 0)

I have 3 tables in an HTML page. I want all of the tables to display when the page is accessed but, when a person decides to print the page I only want 1 of the tables to print. I tried a stylesheet that goes like this '.noprint { display:none; }' All this does is hide those tables that are "noprint" classes. Is there a way to do what I want to? How should I change this stylesheet to get the result I want?

moltar

12:05 am on Dec 22, 2004 (gmt 0)

Try this:


<style type="text/css" media="[b]print[/b]"> 
   .noprint {
   display: none;
}
</style>

joe1182

12:30 am on Dec 22, 2004 (gmt 0)

moltar,
I tried your suggestion and it now displays the 2 hidden tables but, also prints them when I click print. I want these 2 tables to display but, when I click print I want only 1 table to print. Any suggestions?

joe1182

2:14 pm on Dec 22, 2004 (gmt 0)

any help on this?

Arno_Adams

3:29 pm on Dec 22, 2004 (gmt 0)

Did you apply the classes to the tables?

SuzyUK

5:33 pm on Dec 22, 2004 (gmt 0)

joe1182.. when you add moltars suggested CSS have you explicitly set up the call to the main stylesheet/styles to just target the screen media?

joe1182

6:02 pm on Dec 22, 2004 (gmt 0)

The table classes are set up as "noprint". I tried your suggestions and it didn't change anything. Not quite sure what is going on here. Any other suggestions? Would it help to see the full HTML?

SuzyUK

6:17 pm on Dec 22, 2004 (gmt 0)

Would it help to see the full HTML

maybe not the full HTML ;) - just the outline table code (with specific content removed) with it's classname intact just as you have it.

Be sure you show us everything between the <!Doctype.... and </head> tags too..

and tell us what browsers you have tried this in?

Thx
Suzy

joe1182

7:14 pm on Dec 22, 2004 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" media="print" src="noprint.css">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="noprint.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>

There you go. I have tried this in Mozilla, IE and Netscape. Thanks Joe

SuzyUK

10:35 pm on Dec 22, 2004 (gmt 0)

Hi joe..

It looks like there may be some cascade overriding going on..

1.<link rel="stylesheet" media="print" src="noprint.css">
2.<link href="noprint.css" rel="stylesheet" type="text/css">
3.<style type="text/css">

</style>

There's 3 calls to the same stylesheet going on there and the first one is incorrect (src call instead of href), so delete it, then swap 2 & 3 like this, and add in the media attributes to them instead:

main.css should contain the screen styling and noprint.css should only contain styles which will override them for printing if required.

Suzy

joe1182

11:17 pm on Dec 22, 2004 (gmt 0)

Suzy,
Tried your suggestion but, it did not work. I am still receiving the same results. Any ideas?

joe1182

1:36 pm on Dec 23, 2004 (gmt 0)

any help?

SuzyUK

1:47 pm on Dec 23, 2004 (gmt 0)

joe it's working fine for me.. I'm confused :o
and are you checking this using print preview or just hitting the print button?

here's the test code I'm running.. does this work in your browser?

CSS Calls:
<style type="text/css" media="all">
table {font-family: verdana, tahoma, arial, sans-serif; font-size: 76%;}
</style>
<style type="text/css" media="print">
.noprint {display: none;}
</style>
HTML:
<table width="50%" border="1">
<tr>
<td>print this one</td>
</tr>
</table>
<table width="50%" border="1" class="noprint">
<tr>
<td>don't print this one</td>
</tr>
</table>
<table class="noprint" width="565" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="565" height="81" valign="top"><input name="button" type="button" onClick="window.print()" value="Print Estimate">
</td>
</tr>
</table>

Suzy

joe1182

4:56 pm on Dec 23, 2004 (gmt 0)

Suzy,
I tried your example and it worked this time. I must have been missing something. Thank you for all of your help!