WordPress.org

Ready to get started?Download WordPress

Forums

style="float:left" does not work (15 posts)

  1. jessicatink
    Member
    Posted 8 years ago #

    Oh god, I'm pulling my hair out on this one. I've been through everything I can think of, but its not working in IE or Firefox.

    I want the text to wrap around the image, but its not only not showing up, but in firefox, it shows up but the image goes right over the border for the previous post.

    I've tried a few of the fixes i found, but that just broke my style sheet even more.

    Anyone have any ideas that will help me? I'm leaving the broken post up at http://www.ladykildare.com for anyone to see whats going on.

    Thanks everyone
    -Jess

  2. ch0de
    Member
    Posted 8 years ago #

    Add ";" after the word left.

    so its:

    style="float:left;"

    see what that does.

  3. jessicatink
    Member
    Posted 8 years ago #

    I added that to the code, and it did nothing.

  4. tomhanna
    Member
    Posted 8 years ago #

    Try style="float:left; margin:2px;" and see if that works any better.

  5. richards1052
    Member
    Posted 8 years ago #

    I'm guessing you fixed it but...you might want to take a look at the codex article for wrapping text around images. It uses css to automate much of the process of displaying images so you have to do a minimum of manual coding. It makes float tags a thing of the past:

    http://codex.wordpress.org/wrapping_text_around_images

  6. damino
    Member
    Posted 8 years ago #

    With CSS :

    In CSS : add a .image { float:left;width:144px:height:205px}
    and in the XHTML :
    <div class="storyContent"><p> <img class="image" src="http://images.rottentomatoes.com/images/games/coverg/18/669718.jpg " />
    blablabla b lablabalbalba </p>

    I've tried and it's working.

  7. damino
    Member
    Posted 8 years ago #

    To see, follow the link.
    And contract your window browser to see the text wrapping around.

  8. jessicatink
    Member
    Posted 8 years ago #

    I tried exactly as you said, and its showing the image now, but not wrapping it. Here's what is in my styles.css

    .images {
    { float:left;width:144px:height:205px}
    padding: 2px;
    background: transparent;
    border: none;

    notice that the height and width are mentioned in the css. If that worked, what would that do about images that are other sizes ?

  9. Beel
    Member
    Posted 8 years ago #

    You have given the image a class of "left"

    .left {rest-o-stuff}

  10. jessicatink
    Member
    Posted 8 years ago #

    "You have given the image a class of "left"

    .left {rest-o-stuff}"

    I'm not sure what you mean by that.

  11. tomhanna
    Member
    Posted 8 years ago #

    You have two "{" in your image class.

    I think what Beel means is that you need to have a separate class of "left":

    Try this instead:

    img {
    padding: 2px;
    background: transparent;
    border: none;
    }

    img.left {
    float:left;
    }

    And I'd agree with you that the width:144px:height:205px should be in the <img src="blablah" width="144" height="205"> not in the CSS or you're going to do odd things to images that are other sizes.

  12. tomhanna
    Member
    Posted 8 years ago #

    If that doesn't get it, try adding a "margin: 0;" in the "img.left" section. I've had similar issues and for some odd reason setting a margin fixed them.

  13. damino
    Member
    Posted 8 years ago #

    I agree with you to put the image dimensions in the XHTML sheet and in the img tag.
    But something else with jessicatink : after each CSS value, use a ";" note a ":" ...

    Follow my link to see. if it's not working, I will modify it properly with the attributes in the right place (image size in img tag).

  14. bigoteetoe
    Member
    Posted 8 years ago #

    I've had similar problems, and they were resolved by adding:

    <br clear="left" />

    following the image. (instead of "left", you could also use "right" or "all"

  15. ganzua
    Member
    Posted 8 years ago #

    I have the same problem;

    No sooner I insert float:left in css sheet or align="left" next to the image the picture disappears.

    ?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.