Text not wrapping after 1st paragraph

  • Resolved sonnyg80

    (@sonnyg80)


    15 years, 11 months 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!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter sonnyg80

    (@sonnyg80)

    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.

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

    Add:

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

    Should fix the problem.

    Thread Starter sonnyg80

    (@sonnyg80)

    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.

    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 ??

    Thread Starter sonnyg80

    (@sonnyg80)

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

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

    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?

    Thread Starter sonnyg80

    (@sonnyg80)

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

    Thread Starter sonnyg80

    (@sonnyg80)

    K got it fixed.

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

    Thanks so much for your help man!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Text not wrapping after 1st paragraph’ is closed to new replies.