Rounded Corners on Floating Images of Variable Sizes

Recently I have been working on a site that uses the awesome jQuery Corners plugin. The plugin does not support rounded corners on images. So I am dynamically wrapping all the images in the content area with a span so that the image can a border with rounded corners. I thought this would be rather simple but as it always turns out things are a little more complicated than I imagined.

First off these are images coming from a client via a CMS and can be any size or shape. No big deal. I'll just use the inline-block display attribute and move along. Well, not so fast. IE7 has issues with that. It will display at 100% of the parents width. So I need to use jQuery to find the width of our images and set the parent span to the same width. While working through this issue I found out that webkit browsers (Chrome and Safari) do not actually know any DOM element dimensions during $(document).ready. You have to wait a little longer and let the page be drawn out by using $(window).load. That makes sense to me, but I am curious why this is not the same across the board.

Lastly, we have to account for the client setting the image to float left or right in the CMS and transfer those values to the parent. I decided to do that by passing the float value as a class. I have basic styling like float direction and corresponding margin values.

So enough talk. Here is the code:

<script type="text/javascript">
$(window).load(function(){
$('#content img').each(function(index,item){
        var f=$(this).css('float');
        var w=$(item).width();
        $(item).wrap("<span class='img "+f+"'style='width:"+w+"'></span>");
        $(item).parent().corner("10px cc:#AEE1FE");
    });
});
</script>