Home > CSS > Safari clear/float text flow issue

Safari clear/float text flow issue

safari-bug
Here’s a strange and annoying Safari quirk I’ve stumbled upon yesterday, applies to both the Mac and Win versions. Basically, if there’s a text and two right floated elements (read images), and the first element is longer than the paragraph it precedes, and the next paragraph is also preceded by such a floated element, the result will be the text overlapping the floated element – see attached image. Here the code to replicate it: http://jsfiddle.net/TmJ9q/

If anyone knows any workarounds, just drop a comment. Others have reported this here, here and here, with the following test cases: http://jsfiddle.net/JwXke/28, http://jsfiddle.net/VaBCd/

 

  1. No comments yet.
  1. No trackbacks yet.