• 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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Add “;” after the word left.

    so its:

    style=”float:left;”

    see what that does.

    Thread Starter jessicatink

    (@jessicatink)

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

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

    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

    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.

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

    Thread Starter jessicatink

    (@jessicatink)

    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 ?

    You have given the image a class of “left”

    .left {rest-o-stuff}

    Thread Starter jessicatink

    (@jessicatink)

    “You have given the image a class of “left”

    .left {rest-o-stuff}”

    I’m not sure what you mean by that.

    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.

    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.

    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).

    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”

    I have the same problem;

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

    ?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘style=”float:left” does not work’ is closed to new replies.