Hello all,

I have a script that switches between two style sheets. In Firefox it works fine except for a minor bug I will work out later (the page just switches to a style without refreshing the link to switch back). However, in IE6 (IE5.5 seems to be OK but I am not too concerned about that anyway and I haven't IE7 yet) it appears to hang. For testing purposes the CSS is just two different background colors. When you click the link in IE6 it starts to change the background and then just stops.

I have made this a simpler version of what is going on in my real site. Whatever is not letting the background change completely in this example is causing my real site to hang BAD.

The only thing that is not included below is the two style sheets that simply declare a grey background and one that declares a white background.

Thanks for any help,

OH yeah, one thing I forgot to mention: When I refresh the browser the background will complete the change

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="default.css" title="white" />
		<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="grey" />
		<script type="text/javascript">
			function setActiveStyleSheet(title) {
			  var a, main;
			  for(var i=0; (a = document.getElementsByTagName("link")[i]); i++) {
			    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
			      a.disabled = true;
			      if (a.getAttribute("title") == title) a.disabled = false;
			    }
			  }
			}
			
			function getActiveStyleSheet() {
			  var a;
			  for(var i=0; (a = document.getElementsByTagName("link")[i]); i++) {
			    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
			  }
			  return null;
			}
			
			function getPreferredStyleSheet() {
			  var a;
			  for(var i=0; (a = document.getElementsByTagName("link")[i]); i++) {
			    if(a.getAttribute("rel").indexOf("style") != -1
			       && a.getAttribute("rel").indexOf("alt") == -1
			       && a.getAttribute("title")
			       ) return a.getAttribute("title");
			  }
			  return null;
			}
			
			function createCookie(name,value,days) {
			  var expires;
			  if (days) {
			    var date = new Date();
			    date.setTime(date.getTime()+(days*24*60*60*1000));
			    expires = "; expires="+date.toGMTString();
			  }
			  else expires = "";
			  document.cookie = name+"="+value+expires+"; path=/";
			}
			
			function readCookie(name) {
			  var nameEQ = name + "=";
			  var ca = document.cookie.split(';');
			  for(var i=0;i < ca.length;i++) {
			    var c = ca[i];
			    while (c.charAt(0)==' ') c = c.substring(1,c.length);
			    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
			  }
			  return null;
			}
			
			function useStyleSheet(title) {
			    var mydate = new Date();
			    var href = window.location.href;
			
			    setActiveStyleSheet(title);
			    createCookie("style", title, 365);
			
			    window.location.href=href;
					window.location.reload( false );
			}
			
			window.onload = function(e) {
			  var cookie = readCookie("style");
			  var title = cookie ? cookie : getPreferredStyleSheet();
			  setActiveStyleSheet(title);
			}
			
			window.onunload = function(e) {
			  var title = getActiveStyleSheet();
			  createCookie("style", title, 365);
			}
			
			var cookie = readCookie("style");
			var title = cookie ? cookie : getPreferredStyleSheet();
			setActiveStyleSheet(title);

		</script>
	</head>
	<body>
		<script type="text/javascript">
            var style = getActiveStyleSheet()

            if (style == "grey"){
                document.write('<a href="#" onclick="setActiveStyleSheet(\'white\'); return false;">white<\/a>')
                document.write(style);
            }
            else {
                document.write('<a href="#" onclick="setActiveStyleSheet(\'grey\'); return false;">grey<\/a>');
                document.write(style);
            }
    </script>
	</body>
</html>