Question

The structure of my html is basically:

<div id="featured">
  <a href=""><img src="" alt="" /></a>
  <div class="image-description">text</div>
</div>

With css:

#featured { width: 800px; height: 250px; text-align: center; position: relative; }
img { width: auto; height: 250px; }
.image-description { position: absolute; bottom: 10px; }

I have some javascript modifying my html dynamically and works fine in every other browser except IE6 and IE7. It works fine in IE8+.

In IE6 and IE7, it seems to be preventing the image from displaying. I tried debugging in IE7 with web developer tools and the image element is there, but not showing for some reason. I have not in any way css or js modified the visibility or display of the image element or container divs.

By commenting out my javascript, I narrowed it down to this:

$featured = $('#featured');
// calculate var $desc_left now to eliminate/reduce description div "jumping"
var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
$featured.find('.image-description').css('left', $desc_left);
$featured.find('img').load(function() {
    // calculate var $desc_left again to make sure all browsers get the correct widths, like webkit browsers
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
});

The images do eventually appear if I keep reloading the page. Commenting that whole thing out makes IE7 show the image normally. Tested by deleting all browser history/cache after changing js code.

Answer 1

This is a stab in the dark but I’ve come across something similar in IE myself.

It might have to do with the images not being downloaded in time for the DOM when your JavaScript executes. Reloading the page several times forces the DOM to use the cached version of the images so it then appears to work.

Try this. The $(window).load will wait for all images to be downloaded before executing the code inside.

$(window).load(function () {

    //  the following is all of your jQuery JavaScript that depends on your images being available.

    $featured = $('#featured');
    // calculate var $desc_left now to eliminate/reduce description div "jumping"
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
    $featured.find('img').load(function() {
        // calculate var $desc_left again to make sure all browsers get the correct widths, like webkit browsers
    var $desc_left = ( ( $featured.width() - $featured.find('img').width() ) / 2 ) + 10;
    $featured.find('.image-description').css('left', $desc_left);
    });

});

The $(window).load can also be nested inside of your $(document).ready if needed.