title: tablesorter doesn't show up and down arrows
body: <p>I am trying to use the JQuery tablesoter plugin but when it comes to show the arrows it doesn't show either down or up arrow when I sort descending or ascending order. It always shows up and down arrow (unsorted arrow). It seems table.tablesorter .header {...} overrides the table.tablesorter .headerSortUp {...} and table.tablesorter .headerSortDown{...} styles. Below is my code :</p>
  
  <p>CSS </p>
  
  <pre><code>table.tablesorter .headerSortUp {
      background-image: url('../images/icons/asc.gif');
      background-repeat: no-repeat;
      background-position: center right;
  }
  table.tablesorter .headerSortDown {
      background-image: url('../images/icons/desc.gif');
      background-repeat: no-repeat;
      background-position: center right;
  }
  table.tablesorter .header {
      cursor: pointer;
      background-image: url('../images/icons/bg.gif');
      background-repeat: no-repeat;
      background-position: center right;
  }
  </code></pre>
  
  <p>My table is in a velocity template but I don't think that will affect for this problem.</p>
  
  <pre><code>&lt;table id="harvestTable" class="tablesorter" border="1"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Source&lt;/th&gt;
          &lt;th&gt;Time&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        #foreach($item in $self.harvestlist)
          #set($harvestId = $item.getFirst('harvestId'))
  ...
  </code></pre>
  
  <p>And I have included the relevant icons at respective folders. I am using the chrome and tested this on firefox as well but doesn't work in both. When I inspect the element in chrome, I can see that .header's image has overriden the .headerSortUp and .headerSortDown images. If i unselect .header's image, .headerSortUp image is correctly shown.</p>
  
  <p>Have I missed something here? I really appreciate the valuable responses.</p>
  
  <p>Thanks </p>