Support » Fixing WordPress » Dangling Images

  • I have read the codex about clearing the display to keep long images from dangling into the posting below it:

    “Clear The Display

    In the event the image is larger than the amount of text that would otherwise surround it, causing the image to hang like a flag over some element below it, then at some point in the text, you’ll want to clear the display. Note that there is no text inside this division.

    <div style="clear:both;"></div>

    The problem is, this doesn’t work for me. If I don’t use the above division, I get this:

    http://www.mouseprint.org/gifs/dangleyes.gif

    If I do use the above code (and whether putting it at the very end of the text, either inside or outside the end paragraph mark), I get a huge amount of blank space before the “comments” link and the next entry below.

    See: http://www.mouseprint.org/gifs/dangleno.gif

    I have just used carriage returns under the text, but that is hit or miss depending on the browser settings of the person viewing the site.

    Any ideas? (And please… css is a foreign language to me, so please be very explicit.)

    Thanks,

    Edgar

Viewing 15 replies - 1 through 15 (of 33 total)
  • http://www.tamba2.org.uk/wordpress/TestTrack/2006/04/03/test-some-glass/
    Check that post.

    Login to that blog and check how I did it. You will need to turn the RTE off.
    If you check the css, look at the very bottom for this:
    .img-shadow {clear:both;float:left;background:url(images/shadow.gif) no-repeat bottom right;margin:20px 4px 4px 8px}

    .img-shadow img {display:block;position:relative;border:1px solid #a9a9a9;margin:-2px 2px 2px -2px;padding:4px;background:#ccc}

    div.clearer {clear:both}

    There is some information here which might help too:
    http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.php

    Thread Starter dworsky

    (@dworsky)

    Podz…

    Thanks for your help… but I need a little more hand-holding.

    1. How do I see your style.css? (There is no presentation option on your dashboard.)

    2. What does turn off RTE mean and how/where do I do that?

    3. If I also have pictures on the right sometime, what addition to I have to make to the style sheet for those?

    Thanks.
    Edgar

    No problem 🙂

    1. The css is here:
    http://www.tamba2.org.uk/wordpress/TestTrack/wp-content/themes/mapleleaf/style.css

    2. Turn off the new editor in User > profile at the bottom

    3. This is in the CSS:
    .img-shadow {clear:both;float:left;background:url(images/shadow.gif) no-repeat bottom right;margin:20px 4px 4px 8px}

    to make that align to the right, you would change the word in it and also the name:
    .img-shadow1 {clear:both;float:right;background:url(images/shadow.gif) no-repeat bottom right;margin:20px 4px 4px 8px}

    and put that in the css too.

    That help? If not, ask 🙂

    Thread Starter dworsky

    (@dworsky)

    Podz…

    You are most generous with your time and advice… but I still have a problem!

    Look at the first post here about Dell:

    http://www.mouseprint.org

    Here is the underlying html for that post:

    http://www.mouseprint.org/editor.txt
    (you will have to view source to see the actual html)

    Here is the style.css I am using:

    http://www.mouseprint.org/style.css

    (Note I placed this in the root just for viewing.)

    Can you tell where I am going wrong?

    Thanks,

    Edgar

    Thread Starter dworsky

    (@dworsky)

    Podz…

    Any ideas?

    Thanks.

    Edgar

    Make the alteration below – it removes the clear.

    .img-shadow {float:left;background:url(images/shadow.gif) no-repeat bottom right;margin:20px 4px 4px 8px}

    That will still leave a big gap under probably but it’ll be easier to track that down with the above change in place.

    Thread Starter dworsky

    (@dworsky)

    Podz…

    I made the change you suggested so you can further try to diagnose the problem.

    Thanks again. (Do I need a real file called shadow.gif somewhere???)

    Edgar

    You don’t need shadow.gif for this.

    I’ve got to be somewhere else now for ~3 hours but I’ll be back!

    I got let off the task 🙂

    The error is not the image – it’s actually a structural one.
    If you check the page you’ll see the big ‘margin’ below the image. If your image was 20px longer, that margin would be 20px shorter. When the ‘clearer’ happens, it clears everything until the end of the sidebar. Then it continues what it does.
    So …. solutions:
    1 – don’t post long images that extend below any text. You won’t need to use a clearer so the problem won’t happen.
    2 – fix the CSS. It’s probably not a huge change that’s needed – my first stop would be the theme author’s page. We can certainly help to change what is needed but the author may have a fix for this already.

    The better answer is 2 but 1 is perfectly good within the limitations. Which would you like to do?

    Thread Starter dworsky

    (@dworsky)

    Podz…

    Unfortunately, I can’t control the format of the ads that get posted, which often could be larger than the the accompanying text. So option 2 is really the only practical one… and who knows how practical that is if the author of this older theme even has a solution or wants to work on one. (He refers people to the WordPress support site for help.) The theme is “simplegreen” at:

    http://www.techwench.com/wp/entry/simple_green/

    Edgar

    Actualy I think I got it…..
    If I add .storycontent {float: right;} then it looks like it is supposed to … or at least what I think it is supposed to look like.

    And here’s the reason. When using clear: both; it needs two floats to clear against. Since only the image was floating, it used the next previous float, the sidebar. That’s what pushed the remaining content down. Applying the float to the storycontent allows it to float, and the clear clears the image and the storycontent.

    -tg

    dworsky:

    In your Stylesheet, change div.clearer to read
    storycontent.clearer {clear:both}

    That way the clearing is done *inside* your post, and not in comparison to any other dive coming before the post in the document flow.

    I didn’t even think to limit the selector to inside story content… and it makes perfect sense now that I think about it.

    -tg

    Thread Starter dworsky

    (@dworsky)

    TechGnome…

    I added your .storycontent line to the CSS, and while it fixed the first post, it really messed up everything below it (which did not use “clearer”).

    Starting from the third post down, the sidebar became completely violated with each ad and accompanying text basically occupying the entire width of the page, rather than staying in its own main text area.

    Ugg.

    Edgar

    Well, try my fix. It seems to work when I try it in Firefox developer bar.

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘Dangling Images’ is closed to new replies.