Remus

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 the test case: http://remus.pereni.org/fisiere/div/iebug/iebug.zip

View the test case: http://remus.pereni.org/fisiere/div/iebug/