Josh Highland’s Blog

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.