Browser Quirk: Include CSS using DHTML in IE

Authored June 2007

As dynamic Web applications evolve the desire for basic "include" functionality (the ability to dynamically retrieve new content from the server and insert it seamlessly into your application) appears repeatedly. This capability is easily built using XMLHTTPRequest and the W3C DOM interfaces or (the de facto standardized, and simpler) innerHTML property of an element.

One frustration met by many developers is the apparent lack of Internet Explorer support for embedded and/or linked style-sheets in included content.

Including Styles

Web applications often desire the ability to load new content dynamically and unobtrusively. One example is contextual "Help" information. Help content might be pulled, using XMLHTTPRequest, from the server based on some user action and inserted into a DIV using the innerHTML property. This experience (as compared to distracting pop-up help or on-demand requests) can be exceptionally smooth.

For our purposes let's assume that the dynamic content requires certain special CSS declarations. The first inclination of many developers is to include those styles at the top of the content (as they do on any "page") using a style-sheet declaration like so:

	<style>
		p { color: blue; }
	</style>
	<p>Hello, how are you!</p>
	

They may even try to include a seperately defined style sheet using the HTML LINK tag like this:

	<link rel="stylesheet" href="HelpContent.css" type="text/css">
	<p>Hello, how are you!</p>
	

(Note, for the record, that neither of these solutions results in valid HTML - both the LINK and STYLE tags are specified to appear only in the HEAD of a document. However, like many other technically invalid, but oh-so-very-useful techniques browser-support is widespread.)

FireFox (2.x) and Opera (9.x) both work exactly as hoped: in either case the styles are happily and correctly applied to the content. However IE (still commanding an overwhelming share of users) dissappoints: it completely ignores the style sheets.

After poking, prodding and (most likely) lots of swearing many developers give up and declare that IE is simply incapable. They retreat to more cumbersome but reliable solutions (keeping all their styles in a single, global sheet or including all their styles on every page whether it needs them or not). The solution to the problem is actually quite simple (if a bit silly and obtuse).

Fixing the Problem

Move the style-sheet to the bottom of your content. That's it: you've fixed the problem.

IE, for some reason, needs to display some content (anything that affects the page layout will do) before it will recognize style declarations in included content. So while the above examples will fail in IE the following example will work (in FireFox and Opera as well):

	<p>Hello, how are you!</p>
	<style>
		p { color: blue; }
	</style>
	

It will also work using a linked style sheet:

	<p>Hello, how are you!</p>
	<link rel="stylesheet" href="HelpContent.css" type="text/css">
	

Note that style declarations really don't have to appear last. As long as something (anything) above the STYLE or LINK tags affects the layout the styles will be applied. For example a single break tag would trigger the styles, but an empty paragraph would not.

Things to Remember

There are many small "gotchas" when using this technique. Some of the more common are:

• As noted this produces invalid HTML. But also has noted every browser of note supports it (and, with minor exceptions supports it in the same way) so let your conscience guide you.
• Remember that inserted style declarations affect all content on the page, not just the DIV in which they were inserted. It may be a good idea to define a naming scheme for your styles (global vrs local prefixes or some other convention) to reduce the risk.
• When styles are eliminated from the document (the element containing them is cleared or new content is loaded) so also are their effects eliminated. You may be able to use this to your advantage: for example you may want to apply new or dyamically-generated styles to content "on-the-fly". You can do this easily by loading the style into a hidden DIV.
• FireFox has a minor difference in its handling of inserted LINK tags. Both Opera and IE will apply the linked style-sheet immediately. FireFox will wait until the last rendering step to do so. Because of this you might see a slight "pop" in FireFox as it loads the linked declarations.

Conclusion

While you may write-off this issue as just another work-around for Internet Explorer it's difficult to fault it for what amounts to support for invalid HTML. There is no standard to follow when deciding not to follow the standard.

In any case it's a simple issue to work-around and the capabilities gained are cross-platform and potentially very useful.