Once again, I'm facing a css problem with IE8 that is leaving me puzzled. I have a sortable table that is functioning perfectly fine. Within this table, there is a direction icon that serves as a background for the header column that is sorted, changing based on whether the column is sorted in ascending or descending order. However, the issue arises in IE, as the icon fails to update until the mouse cursor is moved away from the header.
As long as the cursor is hovering over the column header, the icon remains unchanged, only revealing the correct icon once the cursor moves away from it.
Although there is no 'hover' event associated with the headers, the CSS includes styling for it.
This snippet of CSS code represents the styling:
.costtable th {
cursor: pointer;
}
th[order='ascending'] {
background-image: url(../images/down.png);
background-position: right;
background-repeat: no-repeat;
}
th[order='descending'] {
background-image: url(../images/up.png);
background-position: right;
background-repeat: no-repeat;
}
The section of the script responsible for setting the icon looks like this:
$table.find('thead th').removeAttr('order');
$table.find('thead th:nth-child(' + columnNumber + ')').attr('order',ascOrDesc);
Despite the fact that there is no CSS support for nth-child in IE8, it still functions properly within jQuery.