Internet Explorer Woes: Floating a Span using jQuery - Order Matters!

I spent the greater part of two hours trying to debug an Internet Explorer bug today. Basically, I wanted to get an image that I uploaded to have a caption applied through jQuery. I used the Image Caption module for Drupal to do this, and set it to grab the 'alt' text in a <span> underneath the image, and wrap both the image and caption inside another <span>, which would grab the float/alignment for the image, and use that to float it left or right (or neither).

Well, in Internet Explorer 6 and 7, the image would appear on its own line, as a block-level element. I tried everything short of throwing my computer against a wall to get this to work, but was unsuccessful. I finally went for broke and tried some thing so dumb that it couldn't possibly work—but it did.

I changed the order of the inline css properties in the script so the float would be applied before the "display: block" value. Bingo, IE works great!

Some things that I have to do to get things to work in Explorer... I hate you, Microsoft!!

You can view a page with the aforementioned image caption here: Featured in the St. Louis Review: Christian Marriage.