IE 8 & 9 not resizing container when width set in image.load

JavaScript
1

To see the issue go to this page and click the next text. The small, medium fullsize text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.

Code (http://moments.qa.chucksoft.com/Scripts/mvc/views/show/Showview.js) Line 154:

     ShowView.prototype.setImageSrc = function (imagesrc) {
          
      var image = $('img#image');
        image.attr('src', imagesrc);
        image.load(function () {
            var container = $('div#imagecontainer');
            container.fadeIn(200);
            var resizer = new Resizer();
            resizer.resize(this.width, this.height, maxWidth, maxHeight);
            var image = $(this);
            var imageWidth = (resizer.width + 23);            
            container.width(imageWidth);
        });
            image.attr('src', imagesrc);
        };

From what I can tell the container.width(imageWidth); is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.

I’ve tried using vanilla javascript. That did not work. I’ve tried setting the image source twice. That did not work either.

I’m at a loss on how to fix this issue. Any insights would be much appreciated.

2

The issue arises when you transition from a landscape image to a portrait image.

3

Hey, I just want to help you clarify your question.

You have two issues, one is the text “small, medium fullsize” are not aligned nicely. other issue is, images not render when page load the first time ?

For issue number one, you can fix by adding margin-left:10px to the id “sizes”.

Issue number two, I don’t see you have it. I view your page in chrome and IE8, everything works fine and looks the same in both browser. And I don’t have to refresh to see images