Hi all,
Can one dynamically toggle display of an element for the "media=print"
stylesheet only?
*clarification: I have a form that I never want to display an element
on the screen, but depending on the value the user selects from a
select box, it may/may not print. (it is an element that will not be
populated until after printed...by hand...ugh.)
It's for the office, so everyone will be using IE6 only. I'm not
worried about the content overlapping the footer right now, just the
printing question. The only option I can think of is having 2
different classes and changing the className.
I'm really hoping for something like
'document.getElementById('footer').style[media=print].display =
"none";
Thanks in advance,
Any/all advice/criticism welcome.
Code following:
<html>
<head>
<title>Generic Instruction Form</title>
<style type='text/css' media='all'>
body {margin:50px; }
body,td {font:10pt arial; }
legend {font-weight:bold; }
#docTitle {font-size:14pt;
font-family:'Trebuchet MS',arial,sans-serif;
padding:0;
margin:0;
text-transform:uppercase;
letter-spacing:4px;
float-left; }
#content {position:relative;
text-align:center; }
/* real document will just be {display:none; } */
#footer {display: block;
margin:50px;
position:absolute;
bottom:0px;
left:0px;
text-align:justify; }
</style>
<style type='text/css' media='print'>
body {margin:0px; }
#footer {display: block;
margin:0px;
position:absolute;
bottom:0px;
left:0px;
text-align:justify; }
</style>
</head>
<body>
<!------------------------------------------// TITLE/ HEADING
//------------------------------------------>
<span id='docTitle'>Generic Instruction Form</span>
<hr style='clear:both; '>
<!------------------------------------------// CONTENT
//------------------------------------------>
<div id='content'>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
<p>somecontentsomecontent</p>
</div>
<!------------------------------------------// FOOTER
//------------------------------------------>
<div id='footer'>
<fieldset style='border:solid 1px #ddd; padding:8px; text-align:center;
'>
<legend>Money Center Information Only</legend>
<table style='border-collapse:collapse; '>
<tr>
<td>Processed by: </td>
<td colspan=4><input type='text'
style='font-size:16pt;
width:100%; background-color:#eee; border:solid 1px #ccc; '
disabled='disabled' /></td></tr>
<tr>
<td>Date Check Mailed: </td>
<td><input type='text' style='font-size:16pt;
width:120px;
background-color:#eee; border:solid 1px #ccc; ' disabled='disabled'
/></td>
<td style='width:50px; '></td>
<td>Check #: </td>
<td><input type='text' style='font-size:16pt;
width:120px;
background-color:#eee; border:solid 1px #ccc; ' disabled='disabled'
/></td></tr>
</table>
</fieldset>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
