-
Print CSS
Hi,
I have a website that have a script for blinking. When I print that site the blink must also be printed, but it's not.:(
I fond info on this site thats it's better to use 2 stylesheets on normal and 1 for printing
My RSS on the screen is well hidden on the printer but the flashing text keeps hidden
This is the test site: http://users.telenet.be/janr/pink.html
The HTML
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Volgende ronde</TITLE>
<LINK HREF="style.css" rel="stylesheet" type="text/css" >
<LINK HREF="printstyle.css" rel="stylesheet" type="text/css" media="print">
<script src="pinken.js" type="text/javascript"></script>
</HEAD>
<Body onLoad = "show('knipper1',750);"><br>
<div class=rss>
<a class="rss" href="rss.xml" target="_blank">
<img src="rss.gif" alt="rss">
</a>
</div>
<table>
<tr>
<td>
<h1>
dinsdag 18 januari 2011
</h1>
</td>
<td>
<h1>dinsdag 25 januari 2011<br>
<div class="blinkprint" id='knipper1' >
Uitgestelde partijen
</div>
</h1>
</td>
<td><h1> dinsdag 1 februari 2011</h1></td>
</tr>
</table>
</BODY>
</HTML>
The styles
normal:
HTML Code:
.vert {WRITING-MODE: tb-rl;FILTER:fliph flipv;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.copyright {WRITING-MODE: tb-rl; FILTER:fliph flipv; width:10px;RIGHT: 0px; POSITION: absolute; bottom: 0px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
/*Menu Links*/
/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/
#menu1 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:blue;text-decoration:none;}
#menu1 a:visited {color:blue;text-decoration:none;}
#menu1 a:hover {color:navy;background-color:Yellow}
#menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu2 a:active {color:blue;text-decoration:none;}
#menu2 a:visited {color:blue;text-decoration:none;}
#menu2 a:hover {color:navy;background-color:yellow}
#menu3 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu3 a:active {color:blue;text-decoration:none;}
#menu3 a:visited {color:blue;text-decoration:none;}
#menu3 a:hover {color:navy;background-color:Yellow}
#menu4 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu4 a:active {color:blue;text-decoration:none;}
#menu4 a:visited {color:blue;text-decoration:none;}
#menu4 a:hover {color:navy;background-color:yellow}
#menu5 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu5 a:active {color:blue;text-decoration:none;}
#menu5 a:visited {color:blue;text-decoration:none;}
#menu5 a:hover {color:navy;background-color:Yellow}
#menu6 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu6 a:active {color:blue;text-decoration:none;}
#menu6 a:visited {color:blue;text-decoration:none;}
#menu6 a:hover {color:navy;background-color:yellow}
#menu7 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu7 a:active {color:blue;text-decoration:none;}
#menu7 a:visited {color:blue;text-decoration:none;}
#menu7 a:hover {color:navy;background-color:yellow}
/*End Menu Links*/
body{ margin-top:10px;
text-align:center;
scrollbar-arrow-color: #FFFF00;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #0000FF;
scrollbar-3dlight-color: #008000;
scrollbar-shadow-color: #00FFFF;
scrollbar-darkshadow-color: #008080;
scrollbar-track-color: Yellow;
background-color: lightcyan;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 00%;
font-family: Garamond;
}
.gekleurdetextarea{
scrollbar-arrow-color: #FF7700;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #0000FF;
scrollbar-3dlight-color: #008000;
scrollbar-shadow-color: #00FFFF;
scrollbar-darkshadow-color: #008080;
scrollbar-track-color: Blue;
}
h1{ color:red;
margin-top:10px;
font-family: Garamond;}
h2.ok{ color:Green;
margin-top:10px
}
h2.NOK{ color:red;
margin-top:10px
}
h2{ color:green;
margin-top:10px;
font-family: Garamond;}
h3{}
h4{}
h5{}
h6{}
h7{}
p{
font-family: Garamond;
}
table.noborder{
border: 0px}
table{ margin-left: auto;
margin-right: auto;
text-align:center;
empty-cells:show;
border: 1px solid #000;
border-color:DarkBlue;
font-size: 16px;
font-family: Garamond;
}
tr.split{
background-color:yellow;
height:05;
}
td{
vertical-align:top;
text-align :center;
border:1px solid darkblue;
valign:top;
}
tr.title{font-weight:bold;text-decoration:underline;}
td.playername{text-align:Left;}
td.NotYet{border-color:Red;background-color:Red;font-weight:bold;color:White;}
td.center{text-align:center;
font-weight:normal;}
td.Round{text-align:center;
font-weight: bold;
}
td.Date{text-align:center;
font-weight: bold;
color:red;
}
td.HeadL{text-align:left;
font-weight: bold;
}
td.HeadR{text-align:right;
font-weight: bold;
}
td.left{text-align:Left;
font-weight:normal;}
td.right{text-align:right;
font-weight:normal;}
td.split{
background-color:yellow;
width:20;
font-weight:normal;
}
td.nextround1 {background-color:Orange;}
td.nextround2 {background-color:Yellow;}
td.nextround3 {background-color:Green;}
td.nextround4 {background-color:LightBlue;}
td.nextround5 {background-color:Violet;}
td.nextround6 {background-color:Tomato;}
td.nextround7 {background-color:yellowgreen;}
td.nextround8 {background-color:DimGray;}
td.nextround9 {background-color:Lime;}
td.nextround10{background-color:DarkGoldenrod;}
tr.Bye{color:Red;font-weight:bold;}
tr.split{height:1;}
td.sameplayer{background-color:Tomato;}
a.rss{text-align:center;
color:yellow;
background-color:Red}
div.rss {text-align:left;}
div.blink {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
div.blinkprint {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
div.uitgesteld {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
td.uitgesteld {background-color:Yellow; text-align:center; color:green; font-weight:bold; }
#logochess {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
.pagebreak {page-break-before:always}
Print
HTML Code:
#menu1 { display:none;visibility: hidden; }
#menu2 { display:none;visibility: hidden; }
#menu3 { display:none;visibility: hidden; }
#menu4 { display:none;visibility: hidden; }
#menu5 { display:none;visibility: hidden; }
#menu5 { display:none;visibility: hidden; }
#menu6 { display:none;visibility: hidden; }
#menu7 { display:none;visibility: hidden; }
#menu8 { display:none;visibility: hidden; }
#datum { display:none;visibility: hidden; }
#knipper1 {display: block; visibility: visible; }
#knipper2 {display:none;visibility: hidden; }
div.blink {visibility: hidden;}
div.blinkprint { visibility: visible; }
div.rss{ visibility: hidden; }
And the script code
Code:
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id,Tijd){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
var s = "hide(\"" + id + "\"" +", " + Tijd +")";
setTimeout(s, Tijd);
}
function hide(id,Tijd){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
var s = "show(\"" + id + "\"" +", " + Tijd +")";
setTimeout(s, Tijd);
}
Can someone help please
Jan
-
Hi there jr212,
and a warm welcome to these forums. ;)
Change this...
Code:
<h1>dinsdag 25 januari 2011<br>
<div class="blinkprint" id='knipper1'>
Uitgestelde partijen
</div>
</h1>
...to this...
Code:
<h1>dinsdag 25 januari 2011<br>
<div class="blinkprint" id='knipper1'>
Uitgestelde partijen
</div>
<div class="blinkprint" id="hide">
Uitgestelde partijen
</div>
</h1>
Then add this to your style.css file...
Code:
#hide {
display:none;
}
...and this to your printstyle.css file....
Code:
#knipper1{
display:none;
}
#hide {
display:block;
}
coothead
-
