9 replies [Last post]
trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 9 years 30 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

Hello boys and girls!

How do I apply the rule @media print into my style sheet?

If I apply it like this

media print {/*
       font-family: serif;
       font-size: 14px;
       color: #000;
       background-color: #fff; */
}

it dosent work.

If I aply without /* ... */ it screws with the original css...

the page conde and the complete css are just below.

<style type="text/css">
@media print {/*
       font-family: serif;
       font-size: 14px;
       color: #000;
       background-color: #fff; */
}

body { 
    font: 12px #fff Arial, sans; 
	background-color: #000;
	margin-left: 0;
}

td.top {
	 background: url("img/fundo-topo.jpg") repeat-x;
	 top: 0; 
	 left: 0;  
	 width: 100%;
	 height: 67px;
	 padding: 5px;
}

td.mid {
	    background-color: #C2CFDF;
	    border-top: 2px solid #D4DBCB;
	    border-bottom: 2px solid #D4DBCB;
}

td.inf { 
	background-color: #000; 
	font-family: arial; 
	font-size: 12px; 
	color: #fff;
	text-align: center; 
}
 
h2 {
	font-family: arial; 
	color: #fff;
 }

ul { 
   list-style: none;
   font-family: arial;
   font-size: 12px;
   color: #000;
   padding-top: 3px;
   padding-left: 15px;
}

.button {
       font-family: arial;
       font-size: 12px;
       color: #fff;
       border: 1px solid #1E5162;
       background-color: #1E5162;
}

</style> 
</head> 
<body>
<table width="100%">
<tr> 
	<td  class="top">
	<h2> Setlist - Day xxxxx </h2> 
</td>
</tr>

<tr>
	<td class="mid">
		<ul> 
		<li>Artist One - Music 1 </li> 
		<li>Artist Two - Music 2 </li>
		<li>Artist Three - Music 3l </li> 
		</ul>
	</td>
</tr> 

<tr> 
	<td class="inf"> 
	<INPUT TYPE="button" value="close" class="button" onclick="window.close()">
	<INPUT TYPE="button" value="print" class="button" onclick="window.print()">

    </td> 
</tr>

</table> 

</body> 
</html>

Anonymous
Anonymous's picture
Guru

@media print - not working

I do believe you are doing it wrong. @media print doesn't contain declarations (properties and values) but full rules (including the selector).

Like this:

@media print {

h1 {font: bold; page-break-before: always;}
p {font: 13pt; page-break-after: avoid;}

}

trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 9 years 30 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

@media print - not working

thanks!
Laughing out loud

I have to pay more attention...

I have read W3 guide for @media but it seens like i didnt

hehe

:/

Anonymous
Anonymous's picture
Guru

@media print - not working

trakinas wrote:
thanks!
Laughing out loud
Glad to help...and now that I helped the next time I get to make fun of you. Wink

OK? Laughing out loud

trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 9 years 30 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

@media print - not working

Triumph wrote:
Glad to help...and now that I helped the next time I get to make fun of you. Wink

OK? Laughing out loud

no problem!

hehe

EDIT:

It still dosent work. I mean, when I preview the printing, it still with the same font and font propities.

Any idea?

Thanks!

briski
briski's picture
Offline
Elder
London
Last seen: 2 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

@media print - not working

As you're including it in you <head> try

 

<style type="text/css" media="print">
p
{
     color: indianred;
}
</style>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 hours 27 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15655
Points: 2793

@media print - not working

what's the overall media type declaration for the style sheet ? where does the @media rule sit in the style sheet i.e top/bottom ? ; answer these questions and you may arrive at the answer.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 9 years 30 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

@media print - not working

briski wrote:
As you're including it in you <head> try

 

<style type="text/css" media="print">
p
{
     color: indianred;
}
</style>

for using @media: where do I have to put them?
*done*

edit:
how to remove a button from a print page

trakinas
Offline
newbie
Juiz de Fora, Brazil
Last seen: 9 years 30 weeks ago
Juiz de Fora, Brazil
Timezone: GMT-3
Joined: 2005-03-02
Posts: 10
Points: 0

@media print - not working

Hugo wrote:
what's the overall media type declaration for the style sheet ? where does the @media rule sit in the style sheet i.e top/bottom ? ; answer these questions and you may arrive at the answer.

Hugo.

at top

mjkstudios
Offline
newbie
Last seen: 5 years 29 weeks ago
Joined: 2009-03-06
Posts: 1
Points: 0

Re: @media print - not working

If you are going to combine print and screen styles in a single stylesheet, you must indicate both:

@media print
{
/* print styles */
}
@media screen
{
/* screen styles */
}

Marc