Dynamically Loading CSS Stylesheet Doesn't Work on Ie

Dynamically loading css stylesheet doesn't work on IE

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Dynamic loading of css files doesn't work in IE

Internet Explorer has a limit of 31 CSS files per page. This limitation has been removed in IE 10.

So you have 2 possibilities if you need to support IE <= 9:

1. reorganize your CSS rules so that you have less than 31 files
2. combine them (recommended)

Dynamically changing stylesheet path not working in IE and Firefox

Rather than changing the sheet in a single link, try using alternate style sheets. See this link on using alternate style sheets:

http://www.alistapart.com/articles/alternate/

IE ignores styles for dynamically loaded content

The problem is that this line of code does not generate the desired set of HTML objects in IE7/IE8:

$('#content').append('<section id="about"><h1>About Us</h1></section>'); 

If you look in the IE DOM inspector, you don't see the desired tags nested appropriately so the DOM is messed up and thus the style rules don't work appropriately. The issue is how things are getting inserted into the DOM by jQuery. I think it's a jQuery interaction problem with IE more than anything else.

Without stepping through the code in detail on IE, I can't say whether it's actually a jQuery issue or an IE issue or just one of those weired combo bugs. Obviously, IE has earned the right of first blame for it's previous transgressions, but it's probably better to just avoid this bug by using some more straightforward code.

Breaking down the code a bit, this code works for me in IE7: Here, we create a single tag, add some innerHTML to it and then insert that root tag using append() rather than give HTML to append.

$(document).ready(function() { 
    var section = $("<section>");
    section.attr("id", "about");
    section.html('<h1>About Us</h1>');
    $('#content').append(section);
});

You can see the revised code work here: http://jsfiddle.net/jfriend00/vEST8/

I don't know why IE has a problem with appending an whole HTML string directly via jQuery, but I have seen this problem before.

CSS loaded dynamically via javascript but not applied

You're missing something:

ssioCss.setAttribute("rel", "stylesheet");

Otherwise there's nothing to tell the browser what to do the with the downloaded file. Just in case you're wondering, type = "text/css" only restricts the MIME Type.

Dynamically loading a style sheet on different domain doesn't work in Firefox

I don't really care for this solution, but what I did was read the css in using ajax and append it directly as a style to the page. I would still be interested in how, or if I can dynamically load a css from another domain using the link tag. Here's an example of my loadCSS method.

function loadCSS(url){

    $jq11.ajax({
        url: url,
        type: 'GET',
        dataType: 'text',
        success: function (data) {
            result = data;
            var css = result,
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

            style.type = 'text/css';
            if (style.styleSheet){
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }

            head.appendChild(style);

        }
    });
}

Dynamically loaded css doesn't apply to dynamically loaded js views in IE8

Did you try using createStyleSheet instead?

Or you could serve IE styleSheet.cssText instead of createTextNode.

---

Related Topics