title: jQuery tablesorter - couldn't attach background gradient image to the header row in IE
body: <p>jQuery 1.7.1, tablesorter, IE 8 - My table has been enabled for sorting using tablesorter plugin. Tablesorter plugin attaches a background image (up and down arrow) for every cell in the header row. I tried to attach a gradient image to the header row, It's working in Chrome and Firefox but not in IE8. Any way to display the gradient and another image (up and down arrow) together in IE?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;thead&gt;
     &lt;tr class="header"&gt;
      &lt;th align="center"&gt;No&lt;/th&gt;
      &lt;th align="center"&gt;NAME&lt;/th&gt;
     &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>CSS  (gradient provide by me)</p>
  
  <pre><code>&lt;style type="text/css"&gt;
   .header {
     background: url('images/bl.gif') repeat-x;
   }
  &lt;/style&gt;
  </code></pre>
  
  <p>CSS (as part of tablesorter plugin)</p>
  
  <pre><code>table.tablesorter thead tr .header {
     background-image: url(images/bg.gif); /* up and down arrow */
     background-repeat: no-repeat;
     background-position: center right;
     cursor: pointer;
  }
  </code></pre>
  
  <p><b>UPDATE</b>:
  Modified my code based on @fudgey suggestion,</p>
  
  <p>CSS (as part of tablesorter plugin)</p>
  
  <pre><code>table.tablesorter thead tr .header span{
     background-image: url(images/bg.gif); /* up and down arrow */
     background-repeat: no-repeat;
     background-position: center right;
     cursor: pointer;
  }
  table.tablesorter thead tr .headerSortUp span{
    background-image: url(images/asc.gif);
    background-repeat: no-repeat;
  }
  table.tablesorter thead tr .headerSortDown span{
    background-image: url(images/desc.gif);
    background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>further, I slightly modified fudgey code,</p>
  
  <pre><code>$('#myTable1').tablesorter( 
  {
     onRenderHeader: function (){
        this.wrapInner('&lt;span class="grdimg"&gt;&lt;/span&gt;');
     }
  });
  </code></pre>
  
  <p>and added some CSS based on <a href="https://stackoverflow.com/questions/8311511/html-stretch-a-span-across-a-td">this</a>,</p>
  
  <pre><code>&lt;style type="text/css"&gt;
   .grdimg{
      float:left; width:100%; min-width:100%;
   }
   &lt;/style&gt;
  </code></pre>