I have an issue in Safari when a floated image is immediately followed by a non-floated <p>, and that <p> has a drop-cap using the -webkit-initial-letter CSS declaration. The drop-cap pushes the rest of the line of text to the right, but it doesn’t always wrap at the right location, so the end of the line of text is hanging out the right side of the block. When this happens on a block that’s most of the width of the browser window I get a horizontal scroll bar on the window.
Demo, (using a div instead of an img): http://johnbeales.com/demos/safari/floatcap.html <http://johnbeales.com/demos/safari/floatcap.html> Does anyone know how to make the first line of text wrap properly without changing the float situation? (I know it’s weird to float a 100% width block like in the demo - that’s just the demo. This is happening in real life with fixed-width images on narrow screens). I’ve tried adding/removing margin from both the <p> and the first block, and tried setting position:relative on the first block. Either unfloating the first block or floating the <p> solves the problem. As does removing the -webkit-initial-letter declaration. Thanks! - John ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
