title: Grails - CSS rules not being applied
body: <p>I'm developing a Grails app and I'm having a problem with the CSS rules applied to a view. Consider this GSP code:</p>
  
  <pre><code>&lt;div id="radio" style="height: 30px"&gt;
      &lt;div class="fieldcontain"&gt;
          &lt;label style="float: left; width: 25%; overflow: hidden"&gt;
              &lt;g:message code="recepcionDeComplejoInstance.tipoDeMineral.label" default="Tipo De Mineral" /&gt;
  
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-button" style="float: left; width: 75%; overflow: hidden; text-align: start"&gt;
          &lt;input type="radio" id="radioComplejo" value="complejo" name="radio" checked="checked"&gt;&lt;label for="radioComplejo"&gt;COMPLEJO&lt;/label&gt;
          &lt;input type="radio" id="radioPlomoPlata" value="plomoPlata" name="radio"&gt;&lt;label for="radioPlomoPlata"&gt;PB-AG&lt;/label&gt;
          &lt;input type="radio" id="radioZincPlata"  value="zincPlata" name="radio"&gt;&lt;label for="radioZincPlata"&gt;ZN-AG&lt;/label&gt;
          &lt;input type="radio" id="radioCobrePlata" value="cobrePlata" name="radio"&gt;&lt;label for="radioCobrePlata"&gt;CU-AG&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="radio2" style="height: 30px"&gt;
      &lt;div class="fieldcontain"&gt;
          &lt;label style="float: left; width: 25%; overflow: hidden"&gt;
              &lt;g:message code="recepcionDeComplejoInstance.naturalezaMineral.label" default="Naturaleza Mineral" /&gt;
  
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-button" style="float: left; width: 50%; overflow: hidden; text-align: start"&gt;
          &lt;input type="radio" id="radioSulfuro" value="sulfuro" name="radio2" checked="checked"&gt;&lt;label for="radioSulfuro"&gt;SULFURO&lt;/label&gt;
          &lt;input type="radio" id="radioOxido" value="oxido" name="radio2"&gt;&lt;label for="radioOxido"&gt;OXIDO&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the result:
  <img src="https://i.stack.imgur.com/m292b.png" alt="result"></p>
  
  <p>There are two CSS classes used in the view:</p>
  
  <ol>
  <li><code>fieldcontain</code>, that is the default CSS provided by Grails. </li>
  <li><code>ui-button</code>,declared in the JQuery UI Lightness file
  (jquery-ui-1.10.3.custom.css)</li>
  </ol>
  
  <p>As you can see the <strong>Naturaleza Mineral</strong> radio buttons don't have the appearance of the <strong>Tipo De Mineral</strong> radio button considering that the same CSS rules are being applied to both radio button groups.</p>
  
  <p>Why is this happening?</p>