Adding an External Stylesheet through Javascript / Ajax

[Basscyst]

So Firefox will let me create an external style sheet reference and append it to the head once a response is received from an http request. IE however doesn't seem to take the style sheet instructions, though the DOM inspector does show that it has been appended to the document.

Here is an example of the problem, just click the "Pricing" tab.

http://www.rateprice.com/combo/pricefinal.asp

This is the xml page I am requesting:
http://www.rateprice.com/combo/pricing.asp

Once the response is received, I append both the js and css files to the head of the document using this code:

function loadURL(xml,str){
	var doc=xml.documentElement;
	var content=toXHTML(doc.getElementsByTagName('div')[0]);
	clearNodes(document.getElementById('pagecontent'));
	document.getElementById('pagecontent').appendChild(content);
	var c_styles=document.getElementsByTagName('link');
	var len1=c_styles.length;
	var n_styles=doc.getElementsByTagName('link');
	var len2=n_styles.length;
	for(var i=0;i<len2;i++){
		var s1=n_styles[i];
		var flg=0;
		for(var j=0;j<len1;j++){
			var s2=c_styles[j];
			if(s2.getAttribute('href').toLowerCase()==s1.getAttribute('href').toLowerCase()){
					s2.parentNode.replaceChild(toXHTML(s1),s2);
					flg=1;
			}
		}
		if(flg==0){
			document.getElementsByTagName('head')[0].appendChild(toXHTML(s1));
		}
	}
	var c_scripts=document.getElementsByTagName('script');
	var len1=c_scripts.length;
	var n_scripts=doc.getElementsByTagName('script');
	var len2=n_scripts.length;
	for(var i=0;i<len2;i++){
		var s1=n_scripts[i];
		var flg=0;
		for(var j=0;j<len1;j++){
			var s2=c_scripts[j];
			if(s2.getAttribute('src').toLowerCase()==s1.getAttribute('src').toLowerCase()){
					s2.parentNode.replaceChild(toXHTML(s1),s2);
					flg=1;
			}
		}
		if(flg==0){
			document.getElementsByTagName('head')[0].appendChild(toXHTML(s1));
		}
	}
}

The javascript appended to the document goes off without a hitch in both browsers, however the css:

#pricingnav{
	margin:0px;
	padding:0px;
	width:100%;
	list-style:none;
	height:18px;
	margin-top:10px;
}
#pricingnav li{
	float:left;
	margin-left:15px;
}
#pricingnav li a{
	display:block;
	height:100%;
	width:100%;
	font-size:.8em;
	background-color:#D6E7F7;
	text-decoration:none;
	text-align:center;
	border:solid 1px;
	padding:0px 5px 0px 5px;
}

Only takes effect in Firefox.


Any suggestions on how to get the style sheet to take in IE7?

Thanks,
Basscyst

[Basscyst]

All right, so if I just create a link element and give it the appropriate attributes, it does actually work in IE 7 as seen here:

http://www.rateprice.com/combo/test2.asp

So it seems there is something about the following code I wrote, which parses the XML into html that IE7 doesn't like when creating a link element.

Its returning the proper node structure, but when I append the link node to the document it doesn't implement the CSS. Still only have this problem in IE. Anyone see anything that might screw with IE when appending the element to the head?

//********************************
// Parses (x)html from an xml doc,
// pass the top most element that should be parsed as 
// (x)html
//********************************
function toXHTML(obj){
	var div=document.createElement('div');
	makeChild(obj,div);
	function makeChild(src_xml,targ_html){
		var new_html=transformXML(src_xml);
		targ_html.appendChild(new_html);
		var kids=src_xml.childNodes;
		var len=kids.length;
		for(var i=0;i<len;i++){
			makeChild(kids[i],new_html);
		}
	}
	return div.firstChild;
}
function transformXML(obj){
	if(obj.nodeType==1){
		var ie = (document.all && !window.opera)?1:0;
		var flg=0;
		if(ie){
			if(obj.tagName.toLowerCase()=="input"){
				if(obj.getAttribute('type').toLowerCase()=="radio"||obj.getAttribute('type').toLowerCase()=="checkbox"){
					var flg=1;
					var html_obj=document.createElement('<'+obj.tagName+' name='+obj.getAttribute("name")+'" />');	
				}else{
					var html_obj=document.createElement(obj.tagName);
				}
			}else{
				var html_obj=document.createElement(obj.tagName);
			}
		}else{
			var html_obj=document.createElement(obj.tagName);
		}
		var atts=obj.attributes;
		var len=atts.length;
		for(var i=0;i<len;i++){
			switch(atts[i].name.toLowerCase()){
				case "name":
					if(flg==0){
						html_obj.name=atts[i].value;
					}
				break;
				case "class":
					html_obj.className=atts[i].value;
				break;
				case "value":
					html_obj.value=atts[i].value;
				break;
				case "colspan":
					html_obj.setAttribute("colSpan",atts[i].value);
				break;
				default:
					html_obj.setAttribute(atts[i].name.toLowerCase(),atts[i].value);	
			}
		}
	}else if(obj.nodeType==3){
		html_obj=document.createTextNode(obj.nodeValue);	
	}
	return html_obj;
}