IE 7 table sorting background class

HTML & CSS
1

Hello I have a table which I use to sort items via javascript. I apply sorting_desc/sorting_asc class to show an arrow to indicate which way the column is sorted. I am using a transparent png for the sort.

The arrow will show up in IE7 but a white background is shown instead of the background image which is applied to the tr. This works in IE8 and FF 3 but not IE7.

Any ideas greatly appreciated?


<table id="countries">
   <thead>
      <tr>
         <th class="sorting">Country</th>
         <th class="sorting_desc">Visitors</th>
      </tr>
   </thead>
   <tbody>



.dataTables_wrapper table tr {
   background:url(/images/th-background.png) repeat-x left top;
   border-bottom:1px solid #FFFFFF;      
   font-size: 13px;   
   text-align: left;
}

thead th.sorting_asc {
   background: url('/images/sort-up-arrow-trans.png') no-repeat center left;
   text-align:left;   
}

thead th.sorting_desc {
   background:url('/images/sort-dn-arrow-trans.png') no-repeat center left;
   text-align:left;      
}
2

Hi, applying a background to the <Tr> element isn’t supported in IE7< I believe.

You’d have to apply it to the <td>'s instead or some other way (I don’t nkow your full table HTML, if it’s just that then you can apply it to the <Table>) :slight_smile: