Dangling Images

  • dworsky

    (@dworsky)


    18 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

Viewing 15 replies - 16 through 30 (of 33 total)
1 2 3
  • petit

    (@petit)

    18 years ago

    Looks good 😉

    Thread Starter dworsky

    (@dworsky)

    18 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

    petit

    (@petit)

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

    Thread Starter dworsky

    (@dworsky)

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

    petit

    (@petit)

    18 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!

    petit

    (@petit)

    18 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 😉

    Thread Starter dworsky

    (@dworsky)

    18 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

    petit

    (@petit)

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

    Thread Starter dworsky

    (@dworsky)

    18 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

    ladydelaluna

    (@ladydelaluna)

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

    Thread Starter dworsky

    (@dworsky)

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

    Michael Bishop

    (@miklb)

    18 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

    TechGnome

    (@techgnome)

    18 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

    Thread Starter dworsky

    (@dworsky)

    18 years ago

    M …

    I tried min. height without success. But thanks.

    Edgar

    Thread Starter dworsky

    (@dworsky)

    18 years ago

    TG…

    I have already tried putting in the clearer manually in a few posts, but with .storycontent {float:right} in the css, it still completely messes up everything making each post full page width, ignoring the sidebar area.

    What *did* work BUT ONLY FOR IE, was in the css for #main getting rid of margin-left:230px and substituting float:right width=75% .

    In Firefox, however the entire main column was moved down until the point where the sidebar text ended.

    Grrrrr.

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