IE7 Bug: Change to Red Style Change to Blue Style

Quick Fix: Replace style to Red Style Replace to Blue Style

Dynamically loaded css files including @import fails to load imports in IE7

Consider the following scenario:

- html page: 
  - head
      <link type="text/css" rel="stylesheet" media="all" href="css/red.css" id="cssLink"/>
  - script
      function changeRed() {		
		var cssFile = document.getElementById('cssLink');
		if( cssFile ) {
			cssFile.href = 'css/red.css';	
		}
      }

      function changeBlue() {		
		var cssFile = document.getElementById('cssLink');
		if( cssFile ) {
			cssFile.href = 'css/blue.css';	
		}
      }
  - body
  	<div id="testZone">
	<div id="red">
		<h1>This should be red</h1>
 		<p>"Cogito ergo sum"</p>		
 	</div>	
 	<div id="blue">
		<h1>This should be blue</h1>
 		<p>"Cogito ergo sum"</p>		
 	</div>
	</div>

And the following css files:

- red.css

---

@import url(redminor.css);
div#testZone {
	background-color:white;
	margin: 20px;
	border:3px solid red;
	padding:20px;	
}	

- redminor.css

---

div#red { display:block;}
#red h1 { color:red; }
#red p { color: red;}

div#blue { display: none;}

- blue.css

---

@import url(blueminor.css);
div#testZone {
	background-color:white;
	margin: 20px;
	border:3px solid blue;
	padding:20px;	
}

- blueminor.css

---

div#blue { display:block;}
#blue h1 { color:blue; }
#blue p { color: blue;}

div#red { display: none;}

At page load the red css is applied by default, which works as expected in all browsers.

When the changeRed() or changeBlue() functions are invoked, the behavior is the expected one in: IE6, FF 1.5-20, Opera 9, but in IE7 only the blue.css or red.css rules get’s applied the ones from the imported css files (blueminor.css or redminor.css) are ignored.

The import works since at page load IE7 applies correctly the rules defined in the imported styles.

Also as a workaround, if I dynamically remove the cssLink element from the DOM, and then I re-create it works correctly in all browsers including IE7.

So if you do this instead things will work as supposed:

	
function replaceRed() {		
	var cssFile = document.getElementById('cssLink');
	var par = cssFile.parentNode;
	par.removeChild(cssFile);
	cssFile = document.createElement('LINK');
	cssFile.type = 'text/css';
	cssFile.id = 'cssLink';
	cssFile.media = 'all';
	cssFile.rel = 'stylesheet';
	cssFile.href = 'css/red.css';
	par.appendChild(cssFile);
}

function replaceBlue() {		
	var cssFile = document.getElementById('cssLink');
	var par = cssFile.parentNode;
	par.removeChild(cssFile);
	cssFile = document.createElement('LINK');
	cssFile.type = 'text/css';
	cssFile.id = 'cssLink';
	cssFile.media = 'all';
	cssFile.rel = 'stylesheet';
	cssFile.href = 'css/blue.css';
	par.appendChild(cssFile);
}	

Download: http://remus.pereni.org/fisiere/div/iebug/iebug.zip