[resolved] Text not wrapping after 1st paragraph (9 posts)

  1. sonnyg80
    Posted 7 years ago #

    The problem is that my blog isn't wrapping text around images after the first paragraph. Example.

    I've read through the codex but to no avail. I'm apparently doing something wrong.

    This is the code from my content section in style.css

    /* Content */
    #main { width: 100%; padding: 20px 0 0 0; }
    .content { float: left; width: 590px; }
    .post { margin: 0 0 25px 0; float: left; }
    .post strong { font-weight: bold; }
    .post h1 a { color: #525252; font-size: 21px; float: left; text-decoration: none; text-transform: lowercase; }
    .post h1 a:hover { background: #f7e495; color: #723f03; }
    .post h1 span { float: left; color: #a8a8a8; font-size: 21px; margin: 0 0 0 5px; }
    .post p { float: left; padding: 10px 0 0 0; color: #505050; line-height: 18px; }
    .post p a { color: #6779b8; text-decoration: none;  }
    .post p a:hover { background: #6779b8; color: #fff; }
    .post blockquote { border-left: 5px solid #fbe9a0; font-size: 16px; font-family: Georgia, serif; float: left; padding: 0px 0 10px 10px; width: 570px; color: #505050; font-style: italic; margin: 15px 0 5px 15px; }
    .post img { float: left; padding: 0 7px 7px 0; }
    .post .meta { background: url(images/comment.gif) no-repeat left; width: 590px; border: 1px solid #b9b9b9; border-left: none; border-right: none; float: left; height: 25px; margin: 15px 0 0 0; font-size: 11px; color: #6b6b6b; }
    .post .meta a { font-size: 11px; float: none; text-transform: lowercase; margin: 0; text-decoration: none; }

    Appreciate any help in this!

  2. sonnyg80
    Posted 7 years ago #

    I did try deleting float:left; in .post p, as I've read that to be an issue and it worked to wrap the text but it didn't recognize when an image was right or center aligned.

  3. jimmiejo
    Posted 7 years ago #

    Hey Sonny,
    Delete the whole ".post img { float: left; padding: 0 7px 7px 0; }" line in your css.


    .alignleft { float: left; margin: 0 10px 0 0; }
    .alignright { float: right; margin: 0 0 0 10px; }

    Should fix the problem.

  4. sonnyg80
    Posted 7 years ago #

    Thank you!

    I had to also delete float:left; under .post p but only thing is that the wrapping doesn't work in IE7. Fine in FF and Safari.

  5. jimmiejo
    Posted 7 years ago #

    Unfortunately, I don't have access to IE to test it myself.

    But it seems like it might be a stupid quirk about IE, which may or may not work.

    Try adding img before .alignleft and .alighright:

    img.alignleft { float: left; ....
    img.alignright { float: right; ....

    I haven't troubleshot with WP for IE in a while, so I'm not positive that will fix it. I can't see any other conflicting code in your css.

    If that doesn't fix it, post a screenshot image in here, if you can, so I can see exactly how it f*&@'s up in IE :)

  6. sonnyg80
    Posted 7 years ago #

    That addition of img didn't do it unfortunately. Blast that IE.

    Here's a screenshot of how it looks in IE7.

  7. jimmiejo
    Posted 7 years ago #

    Seems like that float: left for your .post p (paragraphs) was needed for IE to wrap the paragraphs. If you add that back, how does it affect the wrapping for FF and Safari?

  8. sonnyg80
    Posted 7 years ago #

    Hm - nope. It remains the same and reverts FF back to showing the same way as that screenshot.

  9. sonnyg80
    Posted 7 years ago #

    K got it fixed.

    Had to change an IE fix of .post p { width: px } to auto.

    Thanks so much for your help man!

Topic Closed

This topic has been closed to new replies.

About this Topic