title: Using !important in jQuery's css() function
body: <p>I have a dialog with an overlay declared like so:</p>
  
  <pre><code>     .ui-widget-overlay  {
           position: absolute;
           left: 8px;
           top: 9px;
           height: 985px !important;
           width: 518px !important; 
        }
  </code></pre>
  
  <p>The page I have will have two different page heights. To account for this with the overlay I have done this in my JS file:</p>
  
  <p>If small one visible:</p>
  
  <pre><code>$('.ui-widget-overlay').css("height", "985px !important");
  </code></pre>
  
  <p>else</p>
  
  <pre><code>$('.ui-widget-overlay').css("height", "1167px !important");
  </code></pre>
  
  <p>Apparently this does not work. Is there another way to over ride <code>!important</code> that would?</p>
  
  <p>The page can switch back and forth so I need to always have one or the other. Also if I do not add <code>!important</code> to the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)</p>
  
  <p>Any suggestions? </p>