2 Replies Latest reply: Nov 12, 2007 10:34 AM by Newsgroup_User RSS

    Everything looks fine, until page is printed

    BruceCSI2 Community Member
      I created a page with CSS and html that looks fine in the browser, but when I print it, 2 of the divs overlap. It's on an intranet so I can't post a link to it, but here's the CSS. I'm wondering if anyone can help me out. Thanks in advance.

      #credits {
      margin-top:10px;
      margin-bottom:5px;
      position:relative;
      margin-right:0px;
      width:100%;
      background-image:url(graphics/tosbg.gif);
      }
      #ad1 {
      float:right;
      position:relative;
      margin-top:10px;
      margin-bottom:10px;
      }
        • 1. Re: Everything looks fine, until page is printed
          Newsgroup_User Community Member
          You sould be able to make a seperate CSS for Print vs Web.
          In the printer CSS, perhaps you can just change the positioning and margin
          attributes to compensate for the printing challenges.

          Plus making sure your floats are properly cleared (hard to see if there's
          anything regarding the rest of the HTML in conjunction with the CSS without
          the page)

          Check out this link re: print CSS
          http://www.alistapart.com/articles/goingtoprint/

          Good luck
          -Dave


          "BruceCSI2" <webforumsuser@macromedia.com> wrote in message
          news:fha3dn$mp7$1@forums.macromedia.com...
          >I created a page with CSS and html that looks fine in the browser, but when
          >I
          > print it, 2 of the divs overlap. It's on an intranet so I can't post a
          > link to
          > it, but here's the CSS. I'm wondering if anyone can help me out. Thanks in
          > advance.
          >
          > #credits {
          > margin-top:10px;
          > margin-bottom:5px;
          > position:relative;
          > margin-right:0px;
          > width:100%;
          > background-image:url(graphics/tosbg.gif);
          > }
          > #ad1 {
          > float:right;
          > position:relative;
          > margin-top:10px;
          > margin-bottom:10px;
          > }
          >


          • 2. Re: Everything looks fine, until page is printed
            it may be your print options in your browser. if your page is more than 8 1/2 inches wide, and your printer is set to "shrink to fit," that could cause the overlapping. check your print settings (in Firefox, you set the page scale under Print Preview, but i don't know about other browsers), maybe try printing at 100%. you could also try printing in landscape and see if the whole page prints that way.

            i don't know CSS well enough yet to tell you if that's where the problem is, unfortunately. hopefully someone else who knows more about it can help you there!