Colorbox in IE8 throwing a wobbly

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 开发者_如何学JAVAthis 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.

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();
});

Try an XHTML strict doctype...?

I've experienced the exact same symptoms - but in my case it extended to all browsers.

One cause was that I didn't include the CSS file that I use for pages that use colorbox.

Another cause was I updated to the newest version of jQuery, but didn't upgrade colorbox. (Also, if you update your jquery include, make sure that you also update your jquery vs doc - if you're even using it).

Hope that helps.

Search through your colorbox files for this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader

There will be several instances of it, each pointing to a png. Make sure the path to that png is correct, then test it again.

I'm pretty sure I had this exact problem at one point, and fixing the paths was all I needed to do. However, it's been a while so my memory is a little fuzzy.

I had the same issue. I also had a problem with the image being only 10px wide due to IE not liking CSS max-width being set to 100%. To alleviate the problem I add the following to my CSS.

.cboxIE img
   {
        max-width:none;
         _max-width:none;
   }