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

Paged Media

Expand Messages
  • Greg Chapman
    Hi Folks, I tend to create sites with a margin down the left side of the page. Sometimes this can produce a truncated right margin when printed. To overcome
    Message 1 of 11 , Jan 24, 2005
    • 0 Attachment
      Hi Folks,

      I tend to create sites with a margin down the left side of the page.
      Sometimes this can produce a truncated right margin when printed. To
      overcome this I would make a selection (click at start and shift-click at
      end) and then just print the selection.

      Recently, I've been told that I ought to stop using TABLEs and start using
      DIVs, to separate the menu from the main body!

      I tried the same printing technique with one of my newer DIVed sites and
      although I don't get the unwanted menu down the left of the page, the
      selected DIV that contains the main contents of the page retains its large
      margin, so I am still left with a truncated right margin.

      Is CSS2 now widely enough supported for me to attempt to use its facilities
      to rid printed versions of the pages of the menu and make the main body of
      the page fill the full width of paper? If so what should my style sheet
      contain?

      Sample sites:
      http://www.npopsupport.fsworld.co.uk (tables)
      http://www.seahawk17.plus.com (divs)

      Greg
    • Greg Chapman
      Earlier I said... ... For margin read menu . Greg
      Message 2 of 11 , Jan 24, 2005
      • 0 Attachment
        Earlier I said...

        > I tend to create sites with a margin down the left side of the page.

        For "margin" read "menu".

        Greg
      • Don - htmlfixit.com
        ... Hi Greg, If you search Google for printer friendly css version you will find several great articles on just this issue. Here is the first one which is a
        Message 3 of 11 , Jan 24, 2005
        • 0 Attachment
          Greg Chapman wrote:
          > Hi Folks,
          >
          > I tend to create sites with a margin down the left side of the page.
          > Sometimes this can produce a truncated right margin when printed. To
          > overcome this I would make a selection (click at start and shift-click at
          > end) and then just print the selection.
          >
          > Recently, I've been told that I ought to stop using TABLEs and start using
          > DIVs, to separate the menu from the main body!
          >
          > I tried the same printing technique with one of my newer DIVed sites and
          > although I don't get the unwanted menu down the left of the page, the
          > selected DIV that contains the main contents of the page retains its large
          > margin, so I am still left with a truncated right margin.
          >
          > Is CSS2 now widely enough supported for me to attempt to use its facilities
          > to rid printed versions of the pages of the menu and make the main body of
          > the page fill the full width of paper? If so what should my style sheet
          > contain?
          >
          > Sample sites:
          > http://www.npopsupport.fsworld.co.uk (tables)
          > http://www.seahawk17.plus.com (divs)
          >
          > Greg
          Hi Greg,

          If you search Google for "printer friendly css version" you will find
          several great articles on just this issue. Here is the first one which
          is a great start (although it shows it's age when it worries about a NS
          4.x bug -- a nearly distinct browser):
          http://www.alistapart.com/articles/goingtoprint/

          It is very easy to do. You can turn your menu div to hidden essentially
          and adjust as necessary. That article does a nice job of pointing out
          how to handle a few common bugs.

          Don
        • Greg Chapman
          Hi Don, ... Very helpful! Thanks Don. However, that leads on to another issue... One of the hassles with Internet Explorer, is that it handles images
          Message 4 of 11 , Jan 28, 2005
          • 0 Attachment
            Hi Don,

            > If you search Google for "printer friendly css version" you will find
            > several great articles on just this issue.

            Very helpful! Thanks Don. However, that leads on to another issue...

            One of the hassles with Internet Explorer, is that it handles images
            spanning page breaks badly. (I recall different versions exhibited the
            problem in different ways!)

            I have tried using:

            img {page-break-before : auto;}

            in my style sheet to no avail. What is the standard workaround?

            Greg
          • hsavage
            ... Greg, It may be of little help for you but this is what I use to break pages when printing multiple pictures. This is in the CSS table. P.breakhere {
            Message 5 of 11 , Jan 28, 2005
            • 0 Attachment
              Greg Chapman wrote:
              > Hi Don,
              >
              > Very helpful! Thanks Don. However, that leads on to another issue...
              >
              > One of the hassles with Internet Explorer, is that it handles images
              > spanning page breaks badly. (I recall different versions exhibited the
              > problem in different ways!)
              >
              > I have tried using:
              >
              > img {page-break-before : auto;}
              >
              > in my style sheet to no avail. What is the standard workaround?
              >
              > Greg

              Greg,

              It may be of little help for you but this is what I use to break pages
              when printing multiple pictures.

              This is in the CSS table.

              P.breakhere { page-break-before:always; }

              Occurrences of this are placed strategically in the ensuing pages.

              <p class="breakhere"> </p>

              ºvº
              05.01.28
              hrs > hsavage@...
            • Greg Chapman
              Hi hrs, ... My ideal would be to automate it, but I haven t found anything better than to hard-break it in similar fashion to you. Thanks! Greg
              Message 6 of 11 , Jan 28, 2005
              • 0 Attachment
                Hi hrs,

                > It may be of little help for you but this is what I use to break pages
                > when printing multiple pictures.
                >
                > This is in the CSS table.
                >
                > P.breakhere { page-break-before:always; }
                >
                > Occurrences of this are placed strategically in the ensuing pages.
                >
                > <p class="breakhere"> </p>

                My ideal would be to automate it, but I haven't found anything better than
                to "hard-break" it in similar fashion to you.

                Thanks!

                Greg
              • Greg Chapman
                ... I ve currently got: ================= @media screen {p.break{display : none;} } @media print{ p.break{ page-break-before : always; font-size : 0pt; margin
                Message 7 of 11 , Jan 28, 2005
                • 0 Attachment
                  > This is in the CSS table.
                  >
                  > P.breakhere { page-break-before:always; }
                  >
                  > Occurrences of this are placed strategically in the ensuing pages.
                  >
                  > <p class="breakhere"> </p>
                  >

                  I've currently got:

                  =================
                  @media screen
                  {p.break{display : none;}
                  }

                  @media print{
                  p.break{
                  page-break-before : always;
                  font-size : 0pt;
                  margin : 0px;
                  padding : 0px;
                  height : 0px;
                  }
                  }
                  =================

                  in mine. The screen rule conveniently hides the

                  <P class="break"> </P>

                  when browsing,

                  but I still haven't cracked how to give it zero height when printed. Any
                  ideas?

                  Greg
                • Greg Chapman
                  ... Now I have ================ p.break{ page-break-after : always; } ================ and applied to the preceding paragraph it seems to do the job, with no
                  Message 8 of 11 , Jan 28, 2005
                  • 0 Attachment
                    > > This is in the CSS table.
                    > >
                    > > P.breakhere { page-break-before:always; }
                    > >
                    > > Occurrences of this are placed strategically in the ensuing pages.
                    > >
                    > > <p class="breakhere"> </p>
                    > >

                    Now I have

                    ================
                    p.break{
                    page-break-after : always;
                    }
                    ================

                    and applied to the preceding paragraph it seems to do the job, with no need
                    for a spurious:

                    <p class="breakhere"> </p>

                    Still like to see a "soft page break" technique, or I am sure those who
                    don't use A4 paper will come a cropper when using my sites! :-)

                    Greg
                  • jorigami
                    ... line-height: 1px; height: 1px; margin: -1px 0 0 0; That might work. Plain height: 0px is unreliable with Firefox, at least on screen media it sometimes
                    Message 9 of 11 , Jan 28, 2005
                    • 0 Attachment
                      --- In ntb-html@yahoogroups.com, "Greg Chapman" <greg@e...> wrote:
                      > The screen rule conveniently hides the
                      >
                      > <P class="break"> </P>
                      >
                      > when browsing,
                      >
                      > but I still haven't cracked how to give it zero height when printed.

                      line-height: 1px; height: 1px; margin: -1px 0 0 0;

                      That might work. Plain "height: 0px" is unreliable with Firefox, at
                      least on screen media it sometimes optimizes whole element (and any
                      break with it) away.

                      Let me know if it actually works ;)


                      Jorma
                    • Greg Chapman
                      Hi Jorma, ... As you ll have seen I have avoided the issue by adopting a break-after approach rather than hrs break-before approach. In other places I am
                      Message 10 of 11 , Jan 31, 2005
                      • 0 Attachment
                        Hi Jorma,

                        > > but I still haven't cracked how to give it zero height when printed.
                        >
                        > line-height: 1px; height: 1px; margin: -1px 0 0 0;
                        >
                        > That might work. Plain "height: 0px" is unreliable with Firefox, at
                        > least on screen media it sometimes optimizes whole element (and any
                        > break with it) away.

                        As you'll have seen I have avoided the issue by adopting a "break-after"
                        approach rather than hrs' "break-before" approach.

                        In other places I am still getting people say:

                        ===============================================
                        img {page-break-inside:avoid;}
                        does the trick. This works as far back as IE5.
                        ===============================================

                        so either I'm doing something wrong, or the guy hasn't fully read the
                        question properly.

                        I'll probably upload a sample page and let others have a look/make
                        suggestions.

                        Greg
                      • loro
                        ... The guy is wrong. HTH Lotta
                        Message 11 of 11 , Jan 31, 2005
                        • 0 Attachment
                          Greg Chapman wrote:
                          >In other places I am still getting people say:
                          >
                          >===============================================
                          >img {page-break-inside:avoid;}
                          >does the trick. This works as far back as IE5.
                          >===============================================
                          >
                          >so either I'm doing something wrong, or the guy hasn't fully read the
                          >question properly.

                          The guy is wrong.

                          <http://www.westciv.com/style_master/academy/browser_support/printing.html>

                          HTH
                          Lotta
                        Your message has been successfully submitted and would be delivered to recipients shortly.