I have a couple of CSS selectors like this:
table.SearchCustomerResults > thead > tr > th[sortOrder="0"] {}
table.SearchCustomerResults > thead > tr > th[sortOrder="1"] {}
then I set the sortOrder extension attribute for each of the cells in JavaScript. However, the changed style is not visible in the browser (IE7, perhaps other) until I move the cursor a bit. How can I force styles to be re-evaluated?
Edit: I didn't use IE6 as originally stated, but IE7. The question still remains, though.
IE6 doesn't support attribute or child selectors, so this shouldn't work at all. Are you using ie7-js?
OK, I see now. This looks like a bug in IE (using div and title for th and sortOrder has the same problem).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
th[sortOrder="0"] {color:red}
th[sortOrder="1"] {color:blue}
</style>
<script>
function changeSortOrder() {
// swap the orders so that blue is actually red and vice versa
document.getElementById("hdr0").setAttribute("sortOrder","1");
document.getElementById("hdr1").setAttribute("sortOrder","0");
//document.getElementById("hdr0").innerHTML += "";
//document.getElementById("hdr1").innerHTML += "";
}
</script>
</head>
<body onload="changeSortOrder()">
<table class="SearchCustomerResults">
<thead><tr>
<th sortOrder="0" id="hdr0">red</th>
<th sortOrder="1" id="hdr1">blue</th>
</tr></thead>
</table>
</body>
</html>
The lines that modify innerHTML seem to work around the bug. Can't find any references on Google, though.
There are various hack-y ways to force re-rendering. script.aculo.us has a method called forceRerendering (naturally) that looks like this:
someElement.appendChild(document.createTextNode(' '));
someElement.removeChild(someElement.lastChild);
That ought to work in this case, too.