Coherent: Tall floating pic causes gap in text

  • alarob · Member ·

    Theme: Coherent
    URL: alarob.wordpress.com

    I have removed or reformatted a number of images on my blog since adopting Coherent. The reason is that when viewed on a PC, images that float to left or right only allow about four lines of text, then they shove the rest of the text to below the bottom of the picture. I searched for a cause for this behavior in my code, and there was none.

    I’m also dissatisfied with the way Coherent lets the text run up against the side of a floating image. Margin/padding seem to be nonexistent. The color of blockquote text also seems light to the point of illegibility. But these can be dismissed as matters of taste that I could fix by buying a Premium account.

    So the question I’d like to address here is the floating-image/gappy-text problem. My blog currently doesn’t display the problem because I manually repaired all the damage I was aware of. But if there is any interest in addressing this, I will restore one of the offending images.

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    I hope what I post below will help you.

    See here please > http://en.support.wordpress.com/visual-editor/#alignment

    Regardless of the theme in use, the alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.

    Align-right means position right, with the rest of the content wrapping around the left side of the image.

    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

  • kathrynwp · Staff ·

    If you still need any help with this, could you provide a link to a post (or give me the post title) where I can see the issue so I can troubleshoot? You could keep it as a draft post if you prefer to keep it unpublished.

  • alarob · Member ·

    When I get a chance I may recreate the error by restoring one of the images I deleted as a workaround.

    The problem occurred in the midst of a long paragraph, in mid-sentence in fact. The layout only seems to have been tested with tweet-length paragraphs, as all the theme demo pages suggest is the case.

    Timethief suggested using a CLEAR element in case there is more text than image. This appears to be what the layout is in fact doing, without showing me. And it’s a bad idea in any case. Having to use CLEAR suggests to me that the template is defective.

  • kathrynwp · Staff ·

    When I get a chance I may recreate the error by restoring one of the images I deleted as a workaround.

    Sounds good, let me know once you’ve done that and I’d be glad to take a look.

  • The topic ‘Coherent: Tall floating pic causes gap in text’ is closed to new replies.