IE8 (compatibility mode) won't load my Ajax content

Question

I am working on a jQuery script on http://www.qxl.dk/ and I can't seem to get IE7 (or more accurately, IE8 in IE7 compatibility mode) to load my content.

The sidebar box on the right named "QXL Aktuelt" loads its HTML content from an external file using Ajax load(), then triggers a custom jQuery event ("aktuelt_loaded") that starts a carousel script (like a scrolling newsticker).

Several other content sections on the same page are loaded through Ajax and they work just fine, so I'm wondering what's going wrong. Everything works as expected in Firefox 3.6 and IE8, but not in IE8's compatibility mode.

The script that loads the Ajax content is (inline on the page):

<div id="qxlaktueltHolder"></div>
<script type="text/javascript">
    $("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
        $("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
    });
</script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>

The external script that responds to the event is in the following file:

http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js

All ideas are very welcome.

Answer 1

EDIT:

Looks like your content is being loaded. You seem to have a CSS display issue. Using IE's developer tools, I searched for the href of an a that was loaded properly in Safari

http://www.123hjemmeside.dk/pages/receive.aspx?target=wl&partnerkey=dkqxl:Hobby_aktuelt_1

and found that is was on the page along with all the other content.

UPDATE:

The problem is with your #newsticker element. It, and all of its li elements, have height and/or width properties set to 0.

So whatever code is responsible for sizing/displaying the #newsticker and its content seems to be the culpret.

---

This is a guess, but this script qxlaktuelt_liveload.js is being loaded after this:

<script type="text/javascript">
    $("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
        $("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
    });
</script>

So depending on how long the load() takes, the script may or may not be loaded.

Try:

<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
<script type="text/javascript">
    $("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
        $("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
    });
</script>

Answer 2

Remove all the console in your JavaScript code. For some reason, the IE's break with this.