IE doesn't apply dynamically loaded CSS

Question

It appears as though IE (older versions at least) does not apply CSS that is loaded dynamically. This can be a pain point if you load a page containing CSS via ajax into a "lightbox" or "colorbox".

For example, say your HTML page has a div named "taco":

<style>#taco {color:green;}</style>
<div id="taco">Hola Mundo!</div>

"Hola Mundo!" will be green since the CSS was included in the original HTML page. Then some Javascript happens and appends this to "taco":

<style>#taco {color:green;}</style>
<div id="taco">
  Hola Mundo!
  <style>#burrito {color:red;}</style>
  <span id="burrito">mmmm burrito</span>
</div>

In all browsers except IE, burrito's font will be red.

So is there a way to do this in IE? It seems as though there is not.

Answer 1

The style tag is only allowed in the head section. Placing it somewhere else is simply invalid and that has nothing to do with IE.

More information.

By the way, to solve your problem if you can´t put the styles in a global style-sheet, you can use the 'style' attribute to modify elements:

<p style="...">

Or you can use an iframe but then you'd have to serve a whole page instead of just a few tags.

Answer 2

You might want to start using jQuery's .CSS methed for dynamic style changes like that.

$("#jane").css('color', '#0F0');

Or just plain jane Javascript:

document.getElementById['sally'].style.color = '#0F0';

EDIT:

Have your ajax inject this:

<div id="jane">        
    <div id="sally">Hi, I'm Sally!</div>
    <script>document.getElementById['sally'].style.color = '#0F0';</script>
</div>

Or Why not just inject elements with inline styles computed server side?:

<div id="jane">        
    <div id="sally" style="color:#0F0">Hi, I'm Sally!</div>
</div>

Answer 3

If there is no way to do this, and you don't want to change your server-side code, here is a way for very simple style elements:

// In the callback function, let's assume you're using jQuery
success: function( data ) {

    // Create a dummy DOM element
    var el = document.createElement( 'div' );

    // Add the html received to this dummy element
    el.innerHTML = data;

    // so that you can select its html:
    var s = $( 'style', el ).text();

    // Delegate to another function, it's going to get messy otherwise
    addRules( s );
}

function addRules( s ) {
    // First, separate your strings for each line
    var lines = s.split( '\n' ),

    // Declare some temporary variables
        id,
        rule,
        rules;

    // Then, loop through each line to handle it
    $.each( lines, function() {
        id = $( this ).split( ' ' )[ 0 ];

        // Get the rules inside the brackets, thanks @Esailija
        rules = /\{\s*([^}]*?)\s*\}/.exec( $( this ) )[ 1 ];

        // Split the rules
        rules = rules.split( ';' );

        $.each( rules, function() {
            rule = $( this ).split( ':' );

            // Apply each rule to the id
            $( id ).css( $.trim( rule[ 0 ] ), $.trim( rule[ 1 ] ) );
        } );
    } );
}

So, yeah, basically I'm making a CSS parser.

This is a very basic parser however.

It will parse the following rules only:

#some-id { some: rule; another: rule; }
#other-id { some: rule; yet: another; rule: baby; }

Answer 4

If you load a linked stylesheet dynamically (via AJAX) into a webpage, IE < 8 does not even recognize the LINK tag.

If you load a SCRIPT tag dynamically IE < 8 will not parse it.

Jeron is correct, the only way to dynamically load HTML and have it styled is via iframe, but I am testing the idea of reflowing the container.