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.
#2 CSS Rules Specific to Explorer (IE CSS hacks) IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.
If you want to change the CSS styles dynamically you'll have to attach this portion of code to some event. For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click event and attach a function containing the previous code.
By calling element. style. color = "red"; you can apply the style change dynamically. Below is a function that turns an element's colour to red when you pass it the element's id .
CSS variables have access to the DOM, which means that you can change them with JavaScript.
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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With