Colorbox in IE8 throwing a wobbly

Question

This problem occurs in Firefox and Chrome, but Safari is fine. IE8, however, in compatability mode or not, doesn't load the overlay over the top (it just sits at the top, scrolling the content down - although I guess this is because the overlay is at the top of the markup).

It also doesn't show the image I'm attempting to show, but shrinks the overlay loading image to nothing in the top left of the screen. I am using the standard colorbox-min and the CSS that goes with that.

Inspecting the markup in the IE8 dev tools seems to hint that the content is not actually loaded into the cboxLoadedContent div.

$(document).ready(function() {
    $('a[rel="preview"]').colorbox(
        { 
            photo: true
            , maxWidth: '95%'
            , maxHeight: '95%'
            , photoScaling: true 
        }
    ); 
});

basically the page is a list of media images and when you click one it gives you the preview and allows you to scroll through ones on the page well at least it does in FF took a little screenshot as it was shrinking the overlay thingy http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png

Anyone have any ideas?

I expect my explanation is not great, so maybe I could take a movie of it or something if needed.

Answer 1

Is your code wrapped in a ready function? I've seen instances where code that works in FF/Safari fails in IE because IE seems to load the DOM more slowly. In those cases it almost always turns out that I've failed to wrap the code in a ready function.

$(function() { // the important bit
    $('.colorbox').load('...').colorbox();
});