We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29525
    • 388 Posts
    I"m having trouble formatting printed output.

    The published page to be printed shows images in the content floating left or right with text wrapping around them as expected. However, when I try to print the pages, the print preview shows them inline instead of floating left or right. When editing the content area in modx it appears the same was as the print preview.

    I do have a print stylesheet which is working correctly. It has no code related to images.

    @charset "utf-8";
    
    #menubar2, #footer, #greeting, #welcome {display: none; }
    
    body, p, td, th, ul, a {
    background-color: #fff;
    color: #000;
    font-family: "Times New Roman", Garamond, serif;
    font-size: 100%;
    }


    The images are inserted into the content using the Insert/edit image button on the content tool bar where a class is assigned.

    .imgleft {padding: 10px 10px 10px 0px; float: left; text-align: center}
    .imgright {padding: 10px 0px 10px 10px; float: right; text-align: center}
    


    The class is being properly applied as is evident in the browser view of the page.

    http://www.terrybarthdesign.com/JohnD/index.php?id=17

    Can anyone help me sort this out?

    Thank you!
      www.terrybarthdesign.com
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Your print stylesheet has to position the images.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 29525
        • 388 Posts
        Susan

        Thank you. I had thought the main styles applied to printing unless changed by the print style sheet. I copied the CSS entries to the style sheet and it works! Thank you!

        Terry
          www.terrybarthdesign.com
          • 29525
          • 388 Posts
          One more question sorta related to this one. wink

          The print out includes images that are being split by page breaks. I have tried using the following code in my CSS, but it seems to have no effect.

          page-break-inside: avoid;

          I have been able to get page-break-before and page-break-after to work successfully, but they tends to break up the pages quite a bit. In my research on this, I’ve read about compatibility problems with this and in particular with floated elements.

          Has anyone figured out how to make this work?

          Thanks.
            www.terrybarthdesign.com