We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Ditto dropping styles

    • 15197
    • 65 Posts
    k4satin Reply #1, 17 years, 4 months ago
    I’m trying to use ditto to display news articles, but first it strips all my site css. I’ve been able to create new css styles specific to the ditto template, but I still can’t get the summary text to wrap in Firefox. I don’t care about breaking words, just your basic text wrap. I’ve defined the width with div id, with div class, with p class, and I even tried a table. The other styles are working now more or less, but I can’t get the summary text to wrap.

    I took out some of the text-related css that was working right now so that you can see how ditto is stripping all my site-wide css. If you look at the code right now for the summary text, you’ll see the ’body’ conditions (calling for Verdana text, etc.), but these are not being applied. I’m assuming the initial problem of having all the css stripped is somehow related to the text-wrap problem.

    Here’s a link to see what I’m talking about: http://www.familyresourceconnection.com/modx/index.php?id=8

    This site needs to be open tomorrow - please help!

    Thank you.
      • 8609
      • 607 Posts
      einsteinsboi Reply #2, 17 years, 4 months ago
      I could be totally off track here but from viewing your page source you have:

      <link rel="stylesheet" href="/modx/assets/templates/frc/style.css" type="text/css" media="screen" />

      Shouldn’t it be:

      <link rel="stylesheet" href="/assets/templates/frc/style.css" type="text/css" media="screen" />

      without the /modx before it?

      Second, what does your Ditto call look like?
        The Coding Pad - MODx        MODx Beginner Tutorials     
        MODx Video Tutorials 
        MODx Development
        • 22427
        • 793 Posts
        ottogal Reply #3, 17 years, 4 months ago
        In your CSS you have this rule: 
        #blogTemplate .blogSummarize {text-align: justify;width: 400px;}

        Try to change the absolute value of width to a relative one, say 90% or similar.

          • 22427
          • 793 Posts
          ottogal Reply #4, 17 years, 4 months ago
          Maybe your problem lies in the CSS for .xcContent:
          .xcContent{
float:left;
display:inline;
overflow:hidden;
width:480px;
min-height:578px;
height:auto !important;
height:578px;
background: url(images/ccCenter.gif);
}

          I presume that display: inline and overflow: hidden are causing the non-wrapped output of the summary text.
            • 16278
            • 928 Posts
            kp52 Reply #5, 17 years, 4 months ago
            I hate to say this, but IE8 "Developer tools" picked out the problem better than Firefox and Firebug:
            <div id="contentSub">

            <pre><div id="blogTemplate">
            That PRE tag is drowning out all your style efforts.
            The other comments above are also valid, as far as I can see. NB you have the BASE tag twice, and once you have it once, your stylesheet path can start with "assets/..." (though both FF and IE seem to have found the stylesheet anyway).
            rolleyes KP
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              sottwell Reply #6, 17 years, 4 months ago
              If pasting HTML code into a Rich Text editor, you need to open its HTML or Code window and paste into that instead. If you paste HTML code directly into the Rich Text editor, it is coded to presume that you want the HTML code to be displayed, and will take steps to do that.
                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
                • 15197
                • 65 Posts
                k4satin Reply #7, 17 years, 4 months ago
                Quote from: einsteinsboi at May 12, 2009, 11:08 PM

                I could be totally off track here but from viewing your page source you have:

                <link rel="stylesheet" href="/modx/assets/templates/frc/style.css" type="text/css" media="screen" />

                Shouldn’t it be:

                <link rel="stylesheet" href="/assets/templates/frc/style.css" type="text/css" media="screen" />

                without the /modx before it?

                Second, what does your Ditto call look like?

                Wow. Thanks for all the feedback. I thought I’d get emailed when I got replies, but didn’t. Just updated my settings so hopefully that will happen in the future!

                So, on the question of the modx/ folder, the whole modx install is in a subfolder called modx during development. Maybe since it’s all relative and only being called from inside the folder, that doesn’t need to be specified, but it’s worked up until now. Overall the site reads the stylesheet just fine.
                  • 15197
                  • 65 Posts
                  k4satin Reply #8, 17 years, 4 months ago
                  Quote from: kp52 at May 13, 2009, 04:10 AM

                  I hate to say this, but IE8 "Developer tools" picked out the problem better than Firefox and Firebug:
                  <div id="contentSub">

                  <pre><div id="blogTemplate">
                  That PRE tag is drowning out all your style efforts.
                  The other comments above are also valid, as far as I can see. NB you have the BASE tag twice, and once you have it once, your stylesheet path can start with "assets/..." (though both FF and IE seem to have found the stylesheet anyway).
                  rolleyes KP

                  I agree that it’s got to be related to the <pre> tag. It’s getting inserted in there automatically by either Ditto or TinyMCE from what I can tell, and I don’t know how to get rid of it. I’ve doing searches on that, but haven’t found a solution. I thought it could have been related to Newspublisher as well, but I removed any reference to that and still have the problem. Any ideas where it’s coming from and how to get rid of it?

                  BTW, I saw that through Firebug, but haven’t tried IE8 yet - good to know it’s got developer tools.
                    • 15197
                    • 65 Posts
                    k4satin Reply #9, 17 years, 4 months ago
                    Anyone still there? So, how do I get rid of that <pre> tag, and will I lose anything by removing it? I’m not sure how it’s getting there...
                      • 15197
                      • 65 Posts
                      k4satin Reply #10, 17 years, 4 months ago
                      OK, instead of removing the <pre> tag, I found some css code to work around it:

                      /* Browser specific (not valid) styles to make preformatted text wrap */

                      pre {
                      white-space: pre-wrap; /* css-3 */
                      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
                      white-space: -pre-wrap; /* Opera 4-6 */
                      white-space: -o-pre-wrap; /* Opera 7 */
                      word-wrap: break-word; /* Internet Explorer 5.5+ */
                      }

                      View post at http://ajaxian.com/archives/wrapping-the-pre-tag

                      I still have to reformat everything else inside the <pre> tags since the general doc css is still wiped out, and the paragraph spacing is a little funky between the two browsers, but I can work with it now that the text at least wraps.