Loading ...
Sorry, an error occurred while loading the content.

print.css

Expand Messages
  • dave
    Hi how do I set up the print.css to print the
    Message 1 of 2 , Apr 19, 2005
    • 0 Attachment
      Hi
      how do I set up the print.css to print the <TR style="BACKGROUND-COLOR: part
      of the below table ,I can get the text to print and the border ??
      <TABLE cellSpacing=0 cellPadding=0 border=1>
      <TBODY>
      <TR>
      <TD align=middle width=150> </TD>
      <TD align=middle width=150><STRONG>stereo</STRONG></TD>
      <TD align=middle width=150><STRONG>quad</STRONG></TD>
      <TD align=middle width=150><STRONG>5.1
      surround</STRONG></TD></TR>
      <TR style="BACKGROUND-COLOR: #99ccff">
      <TD align=middle width=150>blue jack</TD>
      <TD align=middle width=150>line in</TD>
      THANKYOU DAVE
    • Bob McAllister
      ... Dave Browsers are behaving correctly when they do not print your background colour. Not all users will have a colour printer and those who do usually
      Message 2 of 2 , Apr 20, 2005
      • 0 Attachment
        On 4/20/05, dave <dmc43959@...> wrote:
        >
        > Hi
        > how do I set up the print.css to print the <TR style="BACKGROUND-COLOR: part
        > of the below table ,I can get the text to print and the border ??
        > <TABLE cellSpacing=0 cellPadding=0 border=1>
        > <TBODY>

        > <TR style="BACKGROUND-COLOR: #99ccff">
        > <TD align=middle width=150>blue jack</TD>
        > <TD align=middle width=150>line in</TD>

        Dave

        Browsers are behaving "correctly" when they do not print your
        background colour. Not all users will have a colour printer and those
        who do usually will not want to have every screen display technique
        (background images and colour blocks) printed.

        If you really do need to have a particular row of the table (that is
        coloured on screen) also highlighted in print, then your print style
        sheet (tablep.css in my example below) must provide an alternative
        technique. Note that what follows assumes you want to highlight just
        one row of the table. There is a modification to make it work for a
        "few" rows. But if you are trying to highlight every second row by
        shading, this will not work.

        What first seems the obvious solution (applying the colour to the top
        and bottom borders of the table row instead of the space between them)
        does not work in Internet Explorer (running on Windows) although Opera
        and Mozilla browsers (such as Firefox) will respond to changes in row
        borders. Plan B was to apply the borders directly to each cell in the
        highlighted row (using the selector tr#highlight td). This will work
        in all three browsers.

        You may be tempted to apply the colour directly to the text in the
        highlighted cells (for a colour printer) but be aware that Opera will
        ignore this (tested on Version 7.54). Remove the comment tags (/* */)
        to see the effect.

        Of course, none of this will be visible on the output from a black and
        white printer, so I made the borders "dashed" and increased the text
        "weight" slightly to give a highlighted effect on a single colour
        page.

        Notice that I added non-breaking spaces ( ) to pad out your short
        highlighted line of table cells. This is to remove inconsistencies in
        the ways browsers render the borders in print. It comes at the cost of
        extra colour on screen. Decide which is the less offensive to you.

        All the other table properties that were moved into the main style
        sheet (table.css) will apply to the print version as well because they
        have no specific media reference and are not contradicted by anything
        in tablep.css.


        ****HTML extract****
        <head>
        <link rel="stylesheet" type="text/css" href="tables.css" />
        <link rel="stylesheet" type="text/css" href="tablesp.css" media="print" />
        </head>

        <body>
        <table>
        <thead>
        <tr><td> </td><td>stereo</td><td>quad</td><td>5.1 surround</td></tr>
        </thead>
        <tbody>
        <tr><td>cccc</td><td>bbbb</td><td>cccc</td></tr>
        <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>cccc</td></tr>
        <tr id="highlight"><td>blue jack</td><td>line
        in</td><td> </td><td> </td></tr>
        <tr><td>cccc</td><td>bbbb</td><td>aaaa</td><td>cccc</td></tr>
        <tr><td>cccc</td><td>aaaa</td><td>cccc</td></tr>
        </tbody>
        </table>
        </body>

        ****table.css****
        table{border-collapse: collapse; border:1px solid black;}
        thead td{font-weight: 700;}
        tr#highlight{background-color: #99ccff;}
        td{border:1px solid black; width: 150px; text-align:center;}

        ****tablep.css ****
        tr#highlight td{
        border-top: 2px dashed #99ccff;
        border-bottom: 2px dashed #99ccff;
        font-weight: 600;
        /*color: #99ccff;*/
        }

        Note that "border-collapse: collapse" causes tables to be rendered in
        the same way as embedding cellSpacing=0 in html, when you define
        external borders (on table) and internal borders (on td). Note that I
        used the <thead> tag to apply a font-weight style that removes the
        need for multiple <strong> tags.

        To have a small number of rows highlighted (instead of just one)
        change id="highlight" to class= "highlight" in the HTML and #highlight
        to .highlight everywhere it occurs in the CSS.

        Hope this helps

        Bob McAllister
      Your message has been successfully submitted and would be delivered to recipients shortly.