> On Mar 18, 2018, at 8:24, John Beales <j...@johnbeales.com> wrote:
>
> 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.
Applying the `clear` property to the `<p />` that follow the floated block
seems to fix it here.
Given your markup:
.top-block + p { clear: both; }
Philippe
--
Philippe Wittenbergh
https://l-c-n.com/
______________________________________________________________________
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/
