Using !important in jQuery's css() function

Question

I have a dialog with an overlay declared like so:

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

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:

If small one visible:

$('.ui-widget-overlay').css("height", "985px !important");

else

$('.ui-widget-overlay').css("height", "1167px !important");

Apparently this does not work. Is there another way to over ride !important that would?

The page can switch back and forth so I need to always have one or the other. Also if I do not add !important to the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)

Any suggestions?

Answer 1

I solved this problem like this:

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

So no inline-Style is lost, an the last overrides the first