WordPress.org

Ready to get started?Download WordPress

Forums

Dangling Images (34 posts)

  1. dworsky
    Member
    Posted 8 years ago #

    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

  2. Mark (podz)
    Support Maven
    Posted 8 years ago #

    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

  3. dworsky
    Member
    Posted 8 years ago #

    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

  4. Mark (podz)
    Support Maven
    Posted 8 years ago #

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

  5. dworsky
    Member
    Posted 8 years ago #

    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

  6. dworsky
    Member
    Posted 8 years ago #

    Podz...

    Any ideas?

    Thanks.

    Edgar

  7. Mark (podz)
    Support Maven
    Posted 8 years ago #

    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.

  8. dworsky
    Member
    Posted 8 years ago #

    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

  9. Mark (podz)
    Support Maven
    Posted 8 years ago #

    You don't need shadow.gif for this.

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

  10. Mark (podz)
    Support Maven
    Posted 8 years ago #

    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?

  11. dworsky
    Member
    Posted 8 years ago #

    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

  12. TechGnome
    Moderator
    Posted 8 years ago #

    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

  13. petit
    Member
    Posted 8 years ago #

    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.

  14. TechGnome
    Moderator
    Posted 8 years ago #

    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

  15. dworsky
    Member
    Posted 8 years ago #

    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

  16. petit
    Member
    Posted 8 years ago #

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

  17. petit
    Member
    Posted 8 years ago #

    Looks good ;)

  18. dworsky
    Member
    Posted 8 years ago #

    Petit...

    If I change div.clearer to what you suggest, what html to do I add at the end of text of the post to clear everything?

    At the moment, everything is a mess in INTERNET EXPLORER (it is OK in FIREFOX)!

    Edg

  19. petit
    Member
    Posted 8 years ago #

    Sorry, I was too fast.
    I only checked the change i Firefox.
    I can see, it didn't work in MSIE.
    There must be other problems I didn't see. Hopefully the investigations by TechGnome and others will bring better results.
    I'll have a look too, later in the day.

  20. dworsky
    Member
    Posted 8 years ago #

    Thanks, all, for your continuing ideas.

    My css at the moment contains all the suggestions above, including the revised .img shadow, and IE has big problems now with all of it. See the current css:

    http://www.mouseprint.org/wp-content/themes/simplegreen/style.css

    You should know that all entries after the first post use align="left" or right for pictures (as I know HTML, but not css stuff).

  21. petit
    Member
    Posted 8 years ago #

    I have downloaded your page and CSS, and made some experiments locally.
    When I deleted the clearer div and the style rules:
    .storycontent {
    FLOAT: right
    }

    storycontent.clearer {
    CLEAR: both
    }

    it now works in both browsers.
    Strange!

  22. petit
    Member
    Posted 8 years ago #

    Another thing to think of, once you get this frustration out of the way, is XHTML standards, which will make your blog easier to maintain.

    Your HTML header states that it is XHTML transitional, but many tags are upper case, that should really be lower case. Some other validation errors also exist.

    I guess this can wait until another day ;)

  23. dworsky
    Member
    Posted 8 years ago #

    Petit...

    Works fine... except for the original problem that started this whole thread... the long dangling picture intrudes into the second posting! (Which is why Podz wanted to add come type of clear to prevent this dangling, but then it created a huge amount of extra white space beneath it.)

    Other ideas? (And I *do* really appreciate your help.)

    (I am afraid xhtml will have to be for another day... I'm learning slowly.)

    Edgar

  24. petit
    Member
    Posted 8 years ago #

    Hrm. I feared that would be the case.
    Trying to do this fast, wasn't the way to go.

    I'll have to sleep on it. I discovered though that your sidebar is put on the margin of your main div, which is a bit unusual and may be part of your problem.
    Usually the main ( containing your posts ) is completely separated from the sidebar, often with a fixed width.

    I'll have to rest my case for the time being.

  25. dworsky
    Member
    Posted 8 years ago #

    Thanks, Petit... sleep on it, maybe.

    (I don't like fixed widths, which is why I chose this theme which expands and contracts with the reader's screen size.)

    Edgar

  26. ladydelaluna
    Member
    Posted 8 years ago #

    can't you possibly insert the image higher in the post - say at the top - so that the text rides completely along the side of it, and then there's less whitespace?

  27. dworsky
    Member
    Posted 8 years ago #

    Ladydelaluna,

    The picture is right at the top of the post, but the text is not always long enough to fill up all the space.

  28. Michael Bishop

    Posted 8 years ago #

    my thought would be giving the post a min height declaration in the CSS.

    IE doesn't like min-height, so maybe this will help:
    http://www.cssplay.co.uk/boxes/minheight.html

  29. TechGnome
    Moderator
    Posted 8 years ago #

    Quote From dworsky: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").

    Here's a thought.... remove the clearer code from the post itself.... and stick it into the template. Then it will allways be there in every post.....Then if both storycontent and the image are floated right and left respecfuly, the clearer will always be there to ensure that everything that follows will be in the right spot.

    It's hard for me to validate this theory as the clearer code is only in that first post.

    -tg

  30. dworsky
    Member
    Posted 8 years ago #

    M ...

    I tried min. height without success. But thanks.

    Edgar

Topic Closed

This topic has been closed to new replies.

About this Topic