Tablesorter does not show up and down arrows

I am trying to use the plugin for a JQuery table plugin, but when it comes to showing arrows, it does not display either a down arrow or an up arrow when sorting in descending or ascending order. It always shows the up and down arrow (unsorted arrow). It seems table.tablesorter.header {...} overrides the styles of table.tablesorter.headerSortUp {...} and table.tablesorter.headerSortDown {...}. Below is my code:

CSS

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;
}

My table is in the speed template, but I don’t think this will affect this problem.

<table id="harvestTable" class="tablesorter" border="1">
      <thead>
      <tr>
        <th>Source</th>
        <th>Time</th>
      </tr>
      </thead>
      <tbody>
      #foreach($item in $self.harvestlist)
        #set($harvestId = $item.getFirst('harvestId'))
...

. firefox, . chrome, , .header .headerSortUp .headerSortDown. .header, .headerSortUp .

- ? .