jquery - 列の並べ替え矢印が付いたJQueryグラデーションヘッダー

Question

IE 7以降とFirefoxの両方で機能して、グラデーションの列ヘッダー行を取得し、Jqueryを使用して並べ替え可能な場合に上/下矢印を表示する方法を見つけようとしています。以下のサンプルテーブルはFirefoxで動作させることができますが、IEは矢印を表示しません。両方で機能させる方法を知っている人はいますか？

テーブル...

<script>
    $(document).ready(function(){
        $("#dataTable").tablesorter({ 
            headers: sortClassAsc: 'headerSortUp',
            sortClassDesc: 'headerSortDown',
            headerClass: 'headerSort'
        });
    }); 
</script>

<table id="dataTable" class="dataTable">
    <thead>
        <tr><th>Col1</th><th>Col2</th></tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
    </tbody>
</table>

css...。

table.dataTable {
    font-size: 11px;
    background: #fff;
    border-collapse: collapse;
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid #8AB8E6;
    border-top: 1px solid #8AB8E6;
}

table.dataTable td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 3px 4px;
}

table.dataTable thead tr th {
    font-size: 12px;
    font-weight: normal; 
    padding: 4px;
    border-bottom: 1px solid #8AB8E6;
    color: #000;
    text-decoration: none;
    cursor: pointer;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0F4FC', endColorstr='#9BC5F4'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#E0F4FC), to(#9BC5F4)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #E0F4FC, #9BC5F4); /* for firefox 3.6+ */
}

table.dataTable .headerSort {
    background-image: url('../images/bg.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.dataTable .headerSortUp {
    background-image: url('../images/asc.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.dataTable .headerSortDown {
    background-image: url('../images/desc.gif'); 
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}