I'm a complete javascript newbie and I know it's not exactly wise to jump into jquery as such, but I did so anyway because I needed something done fairly quickly and in a simple manner. So, forgive me if this is not the most efficient way to get this done.

Anyway, the idea behind the script is to swap out the existing linked css file with another random one after a set amount of time.

As such, I have the following in the head section:

Code:

<link href="styles/style1.css" type="text/css" rel="stylesheet" id="stylesheet" />

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">

var interval
$(document).ready(function() {
interval = setInterval("getCSS()", 5000);// 5 secs between requests
});

function getCSS() {
// randomize the stylesheet to be loaded
var r = Math.floor(Math.random()*3+1);
// set stylesheet to new stylesheet + randomized number
$("#stylesheet").attr({href : "styles/style"+r+".css"});
}
</script>


Everything works nicely in all browsers I've tested (FF, Safari, and Opera) except (of course) IE. Mainly, it swaps out the css (in this case, I'm just changing the background and some text colors for testing purposes). The problem is that only the area that has content receives an update in the background color. Anywhere else, the background remains the same as before. I'm not sure what the problem is, maybe IE renders too slowly, but if you minimize the browser, then maximize again, the background colors display correctly. The problem only shows up if the screen is in view when the css swap happens.

The example can be viewed here: http://reviewdesigns.com/clients/csstest/.

Anyone know a way to fix this problem? Any help is much appreciated.

Thanks kari.patila. Your suggestion led me down the right path. However, placing your suggestion in the body wasn't enough. Basically, to solve it, I had to add height: 100%; overflow: auto; and margin: 0; to the html and body. Thanks.