Jump to content

Using seperate Print/Screen CSS styles


BryanHood

Recommended Posts

I am creating a site using classic ASP (sorry, but it needs to done in this code for now), and I am trying to use seperate print/screen CSS sheets.I have been to the CSS tutorial here, and I can't seem to get some of this to work.I am using ASP code snippets to help break up some of the "standard" page info, and then include that. Enclosed is a sample page, and the included file.I also have my print/screen style sheets (or at least snippets from them).Does anybody have an idea why I could not make the included "Header.asp" table disappear from my printed page?I was able to make it disappear only after placing this code in the actual HTML/ASP page.

<style type="text/css">	@media print { 	 .noPrint {    display:none    }  }</style>

I would really like to not have to include this in every page that I create.HELP!!Thanks.*********************HTML/ASP page

<Html><head>	<title>Commission Report</title>	<META http-equiv="Content-Style-Type" content="text/css">	<link rel="stylesheet" href="../Styles/styles.css" type ="text/css" media="screen" />	<link rel="stylesheet" href="../Styles/stylesPrint.css" type ="text/css" media="print" /></head><body>	<!-- #Include File="../Includes/Header.asp" --></body></html>

Header.asp:

<% If Session("Level") <> "NONE" Then %>  <table border=0 cellspacing=0 padding=0 class=noPrint>  <tr>    <td><font class=userHead>|   Name:</font></td>    <td><font class=userHead>  |   Location: </font></td>    <td><font class=userHead>  |   Sales ID: </font></td>    <td><font class=userHead>  |   Opid:  </font></td>    <td><font class=userHead>  |   Phone ID: </font></td>    <td><font class=userHead>  |   Supervisor: </font></td>    <td><font class=userHead>  | </font></td>  </tr>  <tr>    <td><font class=userInfo> |   <% =Session("UserName") %>   </font></td>     <td><font class=userInfo>  |   <% =Session("Location") %>   </font></td>     <td><font class=userInfo>  |   <% =Session("UserSalesID") %>   </font></td>    <td><font class=userInfo>  |   <% =Session("UserOPID") %>   </font></td>    <td><font class=userInfo>  |   <% =Session("UserPhoneID") %>   </font></td>    <td><font class=userInfo>  |   <% =Session("SupervisorName") %>   </font></td>    <td><font class=userInfo>  | </font></td>  </tr>	</table><% End If %>

stylesPrint.css:

table {	border-collapse:collapse;}table#noPrint {	display:none;}*********I also tried these:	table:noPrint {  display:none;	}and	table.noPrint {  display:none;	}*********.userHead {    COLOR: #000000;    FONT: 14px serif New Roman, Times, serif;    FONT-FAMILY: Times;    TEXT-DECORATION: none;    font-weight: bold;}.userInfo {    COLOR: #000000;    FONT: 14px serif New Roman, Times, serif;    FONT-FAMILY: Times;    TEXT-DECORATION: none;    font-weight: normal;}.noPrint {	display:none;}

styles.css:

table {	border-collapse:collapse;}.userHead {    COLOR: #000000;    FONT: 14px serif New Roman, Times, serif;    FONT-FAMILY: Times;    TEXT-DECORATION: none;    font-weight: bold;}.userInfo {    COLOR: #000000;    FONT: 14px serif New Roman, Times, serif;    FONT-FAMILY: Times;    TEXT-DECORATION: none;    font-weight: normal;}

Link to comment
Share on other sites

Visibility: hidden; did not work for me, either.What is the correct syntax to create a new CSS class that will redefine the table tag?I have tried:table#noPrinttable.noPrinttable:noPrintNone of these seem to help me.Should I be using:<table style=noPrint> or <table class=noPrint> ?

Link to comment
Share on other sites

<table style=noPrint> or <table class=noPrint> ?
That diffenitly will not work. It only works if you assign a class or ID to that peticualr table that you don't want appear. EX:
<style type="text/css">.noprint {  visibility: collapse;  display: none;}</style><table class="noprint">  <tr>     <td>This table will not show.    </td>  </tr></table>

If you don't want a table to appear try using the CSS I used, it should work.

And another question:What is the difference between #style and .style?And which should I use? Can I even redefine an HTML tag?
Okay, frist off, just to be clear "style" is what you use to start the CSS styles unless you are externaly linking them..stylethe period is used for Classes.#stylethe Pound or Number symbol is used for ID's. However they should not be used more then once for applying the same styles to objects. That is what classes are for. Hope that cleared up some cunfusion :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...