Background-image won't change using jquery in IE6

Question

There is a panel on my page with no default background-image css. On load it is set with jquery to an initial image, waits for 10 seconds then loads a random image out of some predetermined images. There are previous and next buttons which allow you to cycle through the images. In ie6 the initial image loads and then a random image also loads after 10 seconds, however pressing prev/next causes the background to become white and the images aren't loaded. With alerts I was able to find that it's still keeping track of the position and url of the image it's supposed to load, but just won't load it. Here is the code below.

<script type="text/javascript">
    var facts = new Array();
    var position;
    $(document).ready(function() {
        <xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/../node[@nodeName='Fun Fact Folder']/node">
            facts[<xsl:value-of select="position()" />] = '<xsl:value-of select="." />';
        </xsl:for-each>
        if(window.location.pathname == "/homepage.aspx" || window.location.pathname == "/") {
            $(".fun_facts_bg").css("background-image", "url(images/fun_fact_homepage.JPG)");
            setTimeout("randomFact()",10000);   
        } else {
            randomFact();
        }
    });
    function randomFact() {
        $("a.previous_button").css("display", "block");
        $("a.next_button").css("display", "block");
        position = Math.ceil(Math.random() * (facts.length - 1));
        changeFact(0);
    }
    function changeFact(increment) {
        position = checkPosition(position, increment);
        $(".fun_facts_bg").css("background-image", "url(" + facts[position] + ")");
    }
    <xsl:text disable-output-escaping="yes">&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
    function checkPosition(currentPos, increment) {
        currentPos = currentPos + increment;
        if (currentPos &gt; facts.length - 1) {
            currentPos = 1;
        } else if (currentPos &lt; 1) {
            currentPos = facts.length - 1;
        }
        return currentPos;
    }
    //--&gt;&lt;!]]&gt;</xsl:text>
</script>

<a class="previous_button" href="javascript:void(0);" onclick="changeFact(-1);">
<a class="next_button" href="javascript:void(0);" onclick="changeFact(1);">

Answer 1

I'm pretty sure you should be using a modulus somewhere to ensure that you stay within the intended range. That may help.