IE ignores styles for dynamically loaded content

Question

I've seen a couple similar questions here with no real answers. Hopefully someone notices this...

IE 8 and below are refusing to apply styles from the css stylesheet defined in the header when they are loaded in a document.ready jquery call.

Paranoid client wants NOBODY to see code or the dev site so I'll have to give a short example. The client wants the site to render only the relevant portion of HTML on a nearly exclusively "ajaxed" site. So, the site is like a grid. If you load the homepage you get this:

<div id="content">
    <section id="home">
        <h1>Title</h1>
        <p>Hi There!</p>
    </section>
</div>

Then onload I use jquery to render the surrounding pages...

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

IE can handle this much, but when it comes to respecting my carefully plotted css, it just ignores the styles and laughs at me.

The site is entirely positioned with absolute positioning, tons of z-indexing and a horrendous amount of jquery animation. The kind of thing you do not want to have recreate in some extra stupid way for some inferior yet dominantly used browser. Dear god please tell me someone has figured out some way to get IE to respect defined styles on elements created after load.

Have ye any ideas?

• I know chunks of real code are preferred but this is succinct and tells you enough without having a full blown audit. Even if the only defined style is #about{ display:none; } it is ignored. The about section is written as requested but it is display block by default.

• I also know this is not technically ajaxing, but I'm using technical jargon to attempt to clarify the order of page loading in as much as it is not standard loaded html.

THE SOLUTION

$('#content').append($('<section>').attr('id', 'about').html('<h1>About Us</h1><p>some text</p>'));

Properly applies the element as well as the css for this and all children. Not sure why nested elements are read properly by IE without having to be declared the same way, but I am definitely grateful. Thanks jfriend00 and everyone else who helped.

Answer 1

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.

Answer 2

To be safe, use jQuery to apply said classes after the append:

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