13 Replies Latest reply: Jul 15, 2012 1:15 AM by 60251977 RSS

    Table text prints wrong colour

    60251977 Community Member

      My webpages have a black background with text in yellow.

       

      It also has some information in tables, and there are links within this table.

       

      I can use print css to successfully print the body of the pages in black text, but the text in tables will only print in yellow. This is not easy to read on a white background and I simply cannot figure out how to get around this. The tables are required, by the way.

       

      Cn anyone suggest a code that will print out the table text in yellow, and the links within that table in blue?

       

      Thanks for any help that is offered

        • 1. Re: Table text prints wrong colour
          John Waller CommunityMVP

          Please post a link to your website so we can see it.

           

          Without one we're guessing.

          • 2. Re: Table text prints wrong colour
            60251977 Community Member

            http://www.punkygibbon.co.uk/bands/c/chelsea.html

             

            This page should give you a good idea of what I'm up against!

            • 3. Re: Table text prints wrong colour
              John Waller CommunityMVP

              Try adding the following at the end of your print.css stylesheet

               

              td, th {

                   color: #000;

              }

              a {

                   color: blue;

              }

              • 4. Re: Table text prints wrong colour
                60251977 Community Member

                Hi John, thanks for getting back. I'm afraid it didn't help, possibly because I think my print.css styelsheet is in a mess? Here it is:

                 

                @charset "UTF-8";

                body {

                          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

                          padding: 0;

                          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

                          color: #000000;

                          font-family: "Times New Roman", Times, serif;

                          font-size: 12pt;

                          background-color: #FFFFFF

                }

                .oneColFixCtrHdr #container {

                          width: 900px;

                          margin: 0 auto;

                          text-align: left; /* this overrides the text-align: center on the body element. */

                          color:#000000;

                          background-color: #FFFFFF;

                }

                .oneColFixCtrHdr #header {

                          visibility: hidden;

                          color: #000000;

                }

                .oneColFixCtrHdr #header h1 {

                          margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

                          padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

                          visibility: hidden;

                          color: #000000;

                }

                .oneColFixCtrHdr #mainContent {

                          color: #000000;

                          text-align: left;

                          background-color: #FFFFFF;

                }

                .oneColFixCtrHdr #footer {

                          padding: 0 10px;

                          background-color: #FFFFFF;

                          visibility: hidden;

                          color: #000000;

                }

                .oneColFixCtrHdr #footer p {

                          margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

                          padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

                          color: #000000;

                          background-color: #FF0000;

                }

                .h3> {

                          color: #000000;

                          background-color: #FFFFFF;

                }

                }

                .h1 {

                          color: #000000;

                          background-color: #FFFFFF;

                }

                .h4 {

                          color: #000000

                          background-color: #FFFFFF;

                }

                 

                 

                .table {

                          font-family: Arial, Helvetica, sans-serif;

                          color: #000000;

                          background-color: #FFFFFF;

                }

                 

                 

                .bold{

                          font-family: Arial, Helvetica, sans-serif;

                          font-size: 12px;

                          color:#000000;

                          background-color: #FFFFFF;

                          }

                 

                .band{

                          font-family: Arial, Helvetica, sans-serif;

                          font-size: 40px;

                          color:  #000000;

                          font-weight: bolder

                          text-align: none;

                          color: #000000

                          background-color: #FFFFFF;

                }

                body {

                          font-family: Arial, Helvetica, sans-serif;

                          font-size: 12px;

                          color: #000000;

                          width: 800px;

                          background-color: #FFFFFF;

                          }

                 

                          .lyrics {

                          font-family: Arial, Helvetica, sans-serif;

                          font-size: 12px;

                          f

                          color: 000000

                          font-style: italic;

                          background-color: #FFFFFF;

                          color: #000000;

                }

                .record{

                          font-family: Arial, Helvetica, sans-serif;

                          font-weight: bold;

                          color:#000000

                          background-color: #FFFFFF;

                          color: #000000;

                          }

                 

                }

                a:link { font-weight: bold;

                text-decoration: underline;

                color: #06c; }

                 

                          }

                #navigation, #advertising, #other {

                 

                  display : none;

                }

                #container, #container2, #content {

                    width: 100%;

                    margin: 0;

                    float: none;

                }

                td, th {

                     color: #000;

                }

                a {

                     color: blue;

                }

                • 5. Re: Table text prints wrong colour
                  Ben Pleysier CommunityMVP

                  Have a look at line 49 of your document as in

                  body,td,th {

                      font-size: 14px;

                     color: #FFFF00;

                  }

                   

                  Gramps

                  • 6. Re: Table text prints wrong colour
                    60251977 Community Member

                    Hi Gramps

                     

                    Can you clarify exactly what part of the stylesheet I need to replace?

                    • 7. Re: Table text prints wrong colour
                      Ben Pleysier CommunityMVP

                      Have a look at line 49 of your document.

                       

                      This is your main document not a style sheet.

                       

                      Gramps

                      • 8. Re: Table text prints wrong colour
                        60251977 Community Member

                        OK, I see that....what do I have to do?

                        • 9. Re: Table text prints wrong colour
                          60251977 Community Member

                          Ah...I see...

                          I'm still don't know how to code it so the table text prints b/w

                          • 10. Re: Table text prints wrong colour
                            Ben Pleysier CommunityMVP

                            There are a few things that you can do. I would probably move line #26 to just above the ending HEAD tag as in

                            <link href="../../print.css" rel="stylesheet" type="text/css" media="print" />

                            </head>

                             

                            Gramps

                            • 11. Re: Table text prints wrong colour
                              60251977 Community Member

                              Blimey, that was brilliant. I have no idea how or why that worked, but it did.

                               

                              Is there something similar I can do to get the h1, h2 headings printing out in black; and also the links in blue?

                              • 12. Re: Table text prints wrong colour
                                Ben Pleysier CommunityMVP

                                At the bottom of print.css add the following

                                body,td,th {

                                    font-size: 14px;

                                    color: #000000;

                                }

                                h3 {

                                    color: #000000;

                                }

                                h3> {

                                    color: #000000;

                                }

                                h1 {

                                    color: #000000;

                                }

                                Gramps

                                • 13. Re: Table text prints wrong colour
                                  60251977 Community Member

                                  Thanks, Gramps, that worked a treat.

                                  Much appreciated.

                                  Thank you everyone for your help