CODEWITHSUNDEEP
javascriptinternet-explorercss-selectors
erikkallen
erikkallen

Reputation: 34421

How can I force Internet Explorer to apply CSS styles

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.

Upvotes: 0

Views: 1778

Answers (3)

blazkovicz
blazkovicz

Reputation: 792

I had similar problem: after inserting new div IE didn't apply margin.
next code helped:
  setTimeout(function () { newDiv.addClass('tratata').removeClass('tratata'); }, 0);   //jquery syntax

Upvotes: 1

savetheclocktower
savetheclocktower

Reputation: 1473

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.

Upvotes: 2

Mark
Mark

Reputation: 6306

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.

Upvotes: 1

Related Questions