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?

Thanks ibanezplayer85.



Neither of these changed the behavior of the page.  I've reverted back to the original stylesheet, which did not have the 'clear' tags...

I'm telling you, it's weird... especially considering it gets it right on the reload...

Oh, and the paragraph under the 'Action Points:' header wraps correctly, it's just the paragraph under the "Class Skills:" header...

Anyway, I'm going to keep playing with it, but any help in the matter would be great!!

Could be...

I think I'll try adding 'height' and 'width' tads to the image and see if that helps force the text wrap...

Well...  That did it...  I guess the browser was having issues identifying the image's size...

Hmm...  now I need to go through and add 'height' and 'width' tags to all my floating images...

Thanks for your help!!