Javscript / jQuery not executing in IE until the body of the page is moused over

Question

I'm working on a new portfolio site at http://www.nitrohandsome.com, and am using the experience to cut my teeth on jQuery. I'm using the latest build and jcarouselite along with the easing extension on my main page for a nifty carousel effect. It works fine in most browsers, but when I started testing in IE (7 and 8, haven't started optimizing for 6.5) I find that jQuery does not execute code as soon as the document is loaded. Rather, it seems to wait until one moves the mouse on to the body of html itself. This causes my carousel to display like a list and my main menu buttons to not render properly until the user moves the mouse. I used browsershots.org to check if it was only happening on my machine, but sadly not. Can anyone shed some light on this for me? I'm a novice with jQuery, and have only a bit more experience with javascript in general, although I am quite familiar with other ECMA languages such as Actionscript.

I would post the source, but the live preview of the post shows that it would try to render the HTML.

Thanks in advance.

Answer 1

You have an extra comma somewhere in your code. Check it for something like this:

{
 param: "whatever",
 param2: "whatever", // <- extra comma!
}

IE dies on these while Firefox does not.

EDIT: Here is the extra comma:

$("#carousel").jCarouselLite({
    btnNext: "#next",
    btnPrev: "#prev",
    visible: 3,
    easing: "easeout",
    speed: 150, // <- REMOVE THIS COMMA
});

SECOND EDIT:

For the sake of anyone that finds this page later on, the reason his page was not showing correctly was because of jQuery's 1.3.1 documented problems with document.ready firing after images or not at all. A fix to the latest jQuery version did the trick.

Answer 2

Thanks Paolo. (Oops. Meant to post this as a response.)