I forgot to mention why I wasn’t doing that ;) In real life, the top block is an image in a blog post coming from a CMS, so it can be any width. It’s Flores right, and if the image is narrow, or the screen is wide, the <p> is beside the image.
I’ve been trying to figure out a better way to lay things out, but it doesn’t seem possible. I guess a solution would be to take the + selector, which I never use, and turn off the drop cap if the <p> is preceded by a floated block. On Sat, Mar 17, 2018 at 9:04 PM Philippe Wittenbergh <ph...@l-c-n.com> wrote: > > > > 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/
