IE doesn't apply dynamically loaded CSS IE doesn't apply dynamically loaded CSS ajax ajax

IE doesn't apply dynamically loaded CSS


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.


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>


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 jQuerysuccess: 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; }