tags:

views:

32

answers:

1

Below is a test HTML file. It displays fine on screen but when I "print" or "print preview" in Firefox 3.6.8 or IE 7.0, the table borders do not appear. What am I missing?

<html>
<head>
    <style type="text/css">
        body {
          background: black;
          font-family: arial, sans-serif;
          color: white;
        }
        table.param, table.param td, table.param th {border: 1px solid white; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; color: white; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>

update: Aha, looks like the <style> tag has a media attribute. I adapted Derek's answer, and now I get it to work in IE 7.0 but not Firefox 3.6.8: (is this a known bug in Firefox?)

<html>
<head>
    <style type="text/css" media="print">
        body {
          background: white;
          color: black;
        }
    </style>
    <style type="text/css" media="screen">
        body {
          background: black;
          color: white;
        }
    </style>
    <style type="text/css">
        body {
          font-family: arial, sans-serif;
        }
        table.param, table.param td, table.param th {border: 1px solid; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>
+2  A: 

It looks like you're using a black background with white table borders, correct? By default, Firefox won't print background colors, so it ends up with a white border on a white background.

You'll probably want to set up a print stylesheet that reverses that color scheme (black on white instead of white on black) for it to print correctly.

derekerdmann
is there a way to do that inline with the `<style>` tag?
Jason S
@Jason S - You could use `@media print { /*your css here */}`, but you could run into browser compatibility issues. Here's some more info: http://reference.sitepoint.com/css/at-media
derekerdmann