jQuery CSS not applying
<p>I'm using <a href="http://stackoverflow.com/questions/4619025/jquery-change-css-color-based-on-inline-style-width">this</a> jQuery with this:</p>

<pre><code>//Table select
$("#reports-table tr").click(
    function(e) {
        if($(e.target).is(".row-button-small")) return;

        var detail_id = $(this).attr('id');
        $(this).addClass("selected");
        $(this).siblings().removeClass("selected");
        $('#details').show().load('/members/details/'+detail_id);
        setupMeter();
        $('#reports-table').width(640);
});
</code></pre>

<p>The problem is, the jQuery css shows for half a second (right after load of the details div), and then reverts to the stylesheet css...
<strong>That is, the CSS from the link! Sorry to be unclear!</strong>
Why!?</p>

<p><strong>Here is the "setupMeter" function:</strong></p>

<pre><code>function setupMeter() {
   var oMeter = $('.meter');
   var percent = 100 * (oMeter.width() / oMeter.closest('.meter-bg').width());

   if (percent &lt; 33) {
       oMeter.css('background-color', 'green');
   }
   else if (percent &gt; 33 &amp;&amp; percent &lt;= 66) {
       oMeter.css('background-color', 'orange');
   }
   else {
       oMeter.css('background-color', 'red');
   }
}
</code></pre>
