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.
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; }