Vertically Aligning Text - Not displaying properly in IE8

Question

Good afternoon everyone, I've managed to write a script that calculates the width and height of an image and properly placed a string of text on the bottom right side of an image for usage with credits/captions.

I've managed to get it to generate, calculate and display perfectly in all browsers other than IE8. For some reason, it is blowing off the screen in IE8 and I can't seem to figure out why it is doing it and improve my JavaScript to possibly have conditional functions for calculations when using IE8.

Any advice?

http://jsfiddle.net/jodriscoll/u26vZ/

$(function ($) {
    // jQuery is passed as the first arg $
    $('.img-right img,.img-left img').bind('load', function () {
        var $img = $(this),
            imgHeight = $img.height(),
            imgWidth = $img.width();
        $img.siblings('p').width(imgWidth);
        $img.siblings('span').width(imgHeight);
        $img.siblings('.credit').css({
            left: imgWidth + 6,
            top: imgHeight - 10
        });
    }).each(function () {
        // we need to force the "load" event to fire if it was already complete:
        // technique taken from https://gist.github.com/268257
        if (this.complete || this.complete === undefined) {
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning
            this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
            this.src = src;
        }
    });
});

Answer 1

Here's how I would go about doing it, and it's not as much work for the browser as far processing the code in your js script. That's a bit unnecessary for something like this.

I've changed the html so the image and vertical text is wrapped with a figure element, and the vertical text is a figcaption instead of a span too.

I changed the CSS so that the img-right divs are position relative, and inline-block, and the vertical text is absolute with right and bottom positions of 0 or whatever so that they are properly and all equally positioned correctly, this should work across browsers, but should it still be mis-aligned in IE, you can simply modify the right and bottom position values for IE specifically using the class in the html tag that specifies it's ie7 or 8 or whatever browser you may need to target.

The script which I did write and all that is necessary for how I went about this, simply sets the img-right containing divs for each one, to have the width that is the width of the img it contains. This is so there is a width set on the containers, and it will make the paragraph text wrap correctly and nicely according to the img width. and therefore enabling you to offset the vertical text to the right of the containers.

Here is the modified fiddle for what I did: http://jsfiddle.net/jaredwilli/u26vZ/11/ The script is now just:

var img = $('.img-right, .img-left');
for (var i = 0; i < img.length; i++) {
    $(img[i]).css({ width: $(img[i]).find('img').width() });
}