Weird CSS behavior that has me scratching my head. Any suggestions?

I’m having problems with text wrapping around floating elements properly on a couple of pages I’ve created. Oddly, the behavior only occurs the first time the page is loaded. If you refresh the page, the text wrap weirdness goes away.

Here’s a link to a page in question: Check this out.

In the example above, the text in question overlays the image of the “gunslinger” floating on the right when it should be wrapping. And, of course, the minute the refresh button is clicked, the page renders the way it was intended to. If you refresh / reload the page, but want to see the odd behavior again, just clear the browsers cache…

Could this be resolved by preloading the image(s), or is it a stylesheet issue?

Oddly, here is a nearly identical page that does not exhibit the same weirdness: Check this out.

Both of the example pages have validated as Transitional HTML 4.01. Obviously, feel free to view the source on the pages.

The stylesheet for the website can be viewed here. Oh, and it too has passed CSS validation.

If you would rather see code posted here, let me know and I’ll post it…

I’m stumped and could really use some help. Anyone know what might be causing this? Any ideas how to prevent this?