tablesorter doesn't show up and down arrows

Question

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 :

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 a velocity template but I don't think that will affect for 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'))
...

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.

Have I missed something here? I really appreciate the valuable responses.

Thanks

Solution 1

The problem you are having is due to css specificity (try out this calculator):

The default blue theme uses:

table.tablesorter thead tr .headerSortUp {} // (0,0,2,3)

so, in order to override this, you'll need a higher css specificity. One way would be to add a th to the sort class:

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4)

Solution 2

This is due to css preference rule. Last matched rule is always applied. to overcome this situation you can always use !important modifier, like in your case

table.tablesorter .headerSortDown {
 background-image: url('../images/icons/desc.gif') !important;

or

you just put .header css before .headerSortDown and .headerSortUp and it will start working.