We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 5195
    • 1 Posts
    Hi I stumbled upon an issue with CSS classes, I can reproduce it but am not sure if it’s me using CSS with MODx in a wrong way as I am quite new to MODx.

    I put my CSS in a document in the MODx resources and have the document content type set to CSS. I link to this CSS document in my template and the styles are processed properly for tags and id’s. Now my issue:

    if the first statement in the CSS document is a class fx:
    .myClass{
      CSSproperty: CSSvalue;
    }
    


    then the class is not processed, which means the styles defined in the class are not applied, all other following CSS is though. If I put some non-class CSS statements before the class statement, the class is processed properly, fx:
    div {
    }
    .myClass{
      CSSproperty: CSSvalue;
    }
    


    I tested this with following CSS:
    div {
      border: 0px;
      margin: 0px;
      padding: 0px;
      outline: 0px;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    #logoContainer {
      width: 128px;
    }
    
    #logo {
      width: 128px;
      height: 200px;
    }
    

    and following HTML in the Home document of MODx:
    <div id="logoContainer" class="centered">
     <img id="logo" src="[[~3]]" />
    </div>
    

    If I remove the first div statement in the css the .centered class is not processed. And empty div statement in the CSS is enough to get the class processed.
    Anyone else experience this?

    Server info: MODx Revolution 2.0.8-pl (traditional), Apache 2.2.17, PHP 5.2.17, MySQL 5.1.47-community-log, pdo_mysql 5.1.47
    Client info: Safari 5.0.4
      • 33968
      • 863 Posts
      I keep all my css external so haven’t experienced this personally.

      If you ’view source’ in your browser is the stylesheet complete or is the first line missing?
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        What happens if you begin your css with a CSS comment, such as
        /* This is my CSS file */


        While this is an interesting problem, it sounds like it could easily be solved by having your general or global styles first, then the class styling. Usually a css file starts with some basic styling of the main elements.
          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