jQuery .load(); not loading all content in IE. grrrrrrr!

Question

Hi,

Hope someone can help me here before my hair falls out!

I am working on my website and I am trying to use .load() to grab an and its content from another page and display it on the homepage.

The code:

   $(document).ready(function(){
            $(".abt").empty().load("about-andrew-broomfield.html article.aboutPage", function() {
                Cufon.refresh('h3');
            });
   });

This works fine in everything except IE!! I am using IE 8 and am using an HTML5shim code from Google so that the tags are recognized.

Basically, in IE the .load() runs but I end up with

<div class="abt"><article class="aboutPage" /></div>

Rather than

<div class="abt"><article class="aboutPage"> .......CONTENT........< /article></div>

I am already including

$.ajaxSetup ({
          // Disable caching of AJAX responses */
          cache: false
      });

So don't think this is anything to do with caching and I have an ajaxComplete function which is triggered after the load and this does indeed trigger in IE.

Does anybody have any ideas as to why IE isn't loading the full content?

Cheers :)

Answer 1

Thanks Sid_M

Even though IE is recognizing and using all my HTML 5 tags —due to my use of <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;— the article tag stops the .load() from working properly in IE 8!! And causes it to load a self closed article tag with no content.

Changed it to a div as suggestion and it worked.

Cheers