I have been working on a help documentation system at work.
There are roughly 50,000 HTML files to deal with (yes 50 thousand).
The html files have a pretty decent structure, but they are by no means XHTML.
I dont have access to a web development language like php, cfm, for asp or this project to insert
the site navigation, page headers and footers, So I decided to go with some sweet web 2.0 un obtrusive javascript.
to make life easier for myself, I had the authors of the help system insert a single line into the head of each HTML file.
The line was a call to a javascript file. That javascript then used the DOM to insert all the appropriate CSS and other JS files I needed to make the pages look clean, and do what I needed them to do.
Things looked great in FireFox. Life was good until I loaded the site into Internet Explorer.
My beautiful project looked like a pile of crap, no styles, no javascript, just a stupid javascript error.
IE isnt known for its script debugging (another reason to no use IE). It took me literally hours to track down the problem.
I was doing this for all the css files (4 of them)
var tmpElm = document.createElement("style");
tmpElm.setAttribute("type", "text/css");
tmpElm.appendChild(document.createTextNode("/some/directory/sweetness.css);"));
document.getElementsByTagName('head')[0].appendChild(tmpElm);
Its clean, simple unobtrusive javascript.
create a style element, add the right attribute to it, add value to the style tag, then append it to the page head.
straight forward stuff.
Like I said, FireFix had no problem with it. After doing tons of test, i realized that IE didnt like me appending a style tag to the head!
Then I found this:
IE won't allow document.createElement('style')
If you try to add style declarations in the head of a document, IE borks at the name 'style' – "unexpected call to method or property access".
http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html
IE gets confused between the head element <style> and the object property .style!
So I spend all that time debugging my code, which was perfectly fine, because IE is retarded and doesnt know the difference between <style> and .style!
WTF!
I removed all that sweet un obtrusive code and used this instead:
document.write("<style type="text/css">@import url(/some/directory/sweetness.css");
I hate using document.write() these days, but it works in both IE and FF now.
My life sucks some times.
{ 4 comments… read them below or add one }
Supposedly there is a Microsoft debugger. I haven’t used it myself.
http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
We use the Javascript Debugger extension at work, which is probably what you were using to debug.
Yeah, the problem wasnt so much the debugger, but the problem with the javascript in IE. I usuually debug my JS using some extentions for firefox, but when it comes down to IE only bugs, I use visual studio 2003 most of the time
Internet explorer developer toolbar
http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Hi Josh,
Was looking for a similar answer, but ran into this problem too. Here is some code I use:
this.create_node = function(name, url) {
var node = null;
if (‘js’ == dyn_load_obj.type) {
node = dojo.create(‘script’);
var attrs = {
id: name,
type: ‘text/javascript’,
src: url
};
dojo.attr(node, attrs);
} else if (‘css’ == dyn_load_obj.type) {
node = dojo.create(‘link’);
var attrs = {
id: name,
type: ‘text/css’,
rel: ‘stylesheet’,
media: ‘all’,
href: url
};
dojo.attr(node, attrs);
} else if (‘ico’ == dyn_load_obj.type) {
node = dojo.create(‘link’);
var attrs = {
id: name,
type: ‘image/x-icon’,
rel: ‘shortcut icon’,
href: url
};
dojo.attr(node, attrs);
}
return node;
}
I use the Dojo toolkit so you’ll see ref’s to it, but the idea is the same. Use a script to create a element and then do something like this:
window.document.head = window.document.head || window.document.getElementsByTagName(‘head’)[0];
window.document.head.appendChild(node);
…to insert the code in the head section of the page.
This actually works in IE. The thing is, I was trying to find a way to get a work around for another problem with IE. When you try to use the above code on a popup window (from the orginal window) FF, Opera, Chrome…no problem. But of coarse IE won’t do it, at least with my simple XP – IE8 setup. Some kind of bug left over from endless upgrading as best I could find Googling. God I hate Microsoft!