'clear' help needed

Discussion in 'HTML' started by al jones, Jan 7, 2007.

  1. al jones

    al jones Guest

    I already know this displays improperly in FireFox. One problem at a time,
    please.

    The problem I'm asking for help with, specifically, is best demonstrated in
    http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    css because the images of the diary entries, where longer than the
    assiciated text, would force the next image to the right. I inserted a
    clear left to the <p> tag, which gives me the display you see now.

    Obviously <hah??> what I'd like to see is the image on the left, with the
    associated text to the right. If the image is longer, then force the
    following image / text pair down until the image places itself properly to
    the left.

    I've had this up in alt.html.critique, but since I'm adressing particular
    issues thought I should move it to a more appropriate newsgroup.

    Since I'm not (obviously) a web designer, and this is strictly a family
    project I'll take all suggestions you're willing to offer - and pointers to
    the solution would also be willingly accepted.

    thanks //al
    al jones, Jan 7, 2007
    #1
    1. Advertising

  2. al jones

    al jones Guest

    On Sat, 6 Jan 2007 21:24:21 -0600, al jones wrote:

    > I already know this displays improperly in FireFox. One problem at a time,
    > please.
    >
    > The problem I'm asking for help with, specifically, is best demonstrated in
    > http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    > css because the images of the diary entries, where longer than the
    > assiciated text, would force the next image to the right. I inserted a
    > clear left to the <p> tag, which gives me the display you see now.
    >
    > Obviously <hah??> what I'd like to see is the image on the left, with the
    > associated text to the right. If the image is longer, then force the
    > following image / text pair down until the image places itself properly to
    > the left.
    >
    > I've had this up in alt.html.critique, but since I'm adressing particular
    > issues thought I should move it to a more appropriate newsgroup.
    >
    > Since I'm not (obviously) a web designer, and this is strictly a family
    > project I'll take all suggestions you're willing to offer - and pointers to
    > the solution would also be willingly accepted.
    >
    > thanks //al


    belatedly validated both the css and html. Fixed the 'apostrophe' in the
    html. Checked again after correcting and that was the only error to
    surface. //al
    al jones, Jan 7, 2007
    #2
    1. Advertising

  3. al jones

    mbstevens Guest

    On Sat, 06 Jan 2007 21:24:21 -0600, al jones wrote:

    > I already know this displays improperly in FireFox. One problem at a time,
    > please.
    >
    > The problem I'm asking for help with, specifically, is best demonstrated in
    > http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    > css because the images of the diary entries, where longer than the
    > assiciated text, would force the next image to the right. I inserted a
    > clear left to the <p> tag, which gives me the display you see now.
    >
    > Obviously <hah??> what I'd like to see is the image on the left, with the
    > associated text to the right. If the image is longer, then force the
    > following image / text pair down until the image places itself properly to
    > the left.


    p img {clear: left; } might be what you're looking for?
    Browser support for clear is not universal. I try to avoid it when
    possible.
    mbstevens, Jan 7, 2007
    #3
  4. al jones

    al jones Guest

    On Sun, 07 Jan 2007 15:32:50 GMT, mbstevens wrote:

    > On Sat, 06 Jan 2007 21:24:21 -0600, al jones wrote:
    >
    >> I already know this displays improperly in FireFox. One problem at a time,
    >> please.
    >>
    >> The problem I'm asking for help with, specifically, is best demonstrated in
    >> http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    >> css because the images of the diary entries, where longer than the
    >> assiciated text, would force the next image to the right. I inserted a
    >> clear left to the <p> tag, which gives me the display you see now.
    >>
    >> Obviously <hah??> what I'd like to see is the image on the left, with the
    >> associated text to the right. If the image is longer, then force the
    >> following image / text pair down until the image places itself properly to
    >> the left.

    >
    > p img {clear: left; } might be what you're looking for?
    > Browser support for clear is not universal. I try to avoid it when
    > possible.


    I read that as doing a clear left for each p or img, is that correct??

    As the pages are currently laid out I have an h2 followed by an <h3>
    followed by a <p> which are (probably repeated for different dates on the
    same page). Your solution to this would be ....?? because I obviously
    don't know what I'm doing with it.

    //al
    al jones, Jan 7, 2007
    #4
  5. al jones

    Bergamot Guest

    mbstevens wrote:
    >
    > p img {clear: left; }
    > Browser support for clear is not universal.


    Really? Which CSS-capable browsers don't support it, or don't support it
    correctly?

    --
    Berg
    Bergamot, Jan 7, 2007
    #5
  6. al jones

    Bergamot Guest

    al jones wrote:
    > On Sun, 07 Jan 2007 15:32:50 GMT, mbstevens wrote:
    >
    >> On Sat, 06 Jan 2007 21:24:21 -0600, al jones wrote:
    >>
    >>> http://aljones.us/630817vad.html

    >>
    >> p img {clear: left; }

    >
    > I read that as doing a clear left for each p or img, is that correct??


    No, it's a descendant selector.
    http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

    The suggestion above won't work in your case because you don't have
    those images inside <p> elements.

    One thing you could do is to put the <a> and image inside the associated
    h3 element. Adding a clear:left to all h3's should always put the next
    entry below any images.
    <h3><a href...><img...></a>Thur. Aug. 20, 1863</h3>

    h3 {clear:left}
    h3 img {float:left; margin:...}

    The other option is to add a class selector to each h3 that specifically
    needs to be cleared, or add an inline style to them.

    --
    Berg
    Bergamot, Jan 7, 2007
    #6
  7. al jones

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > Browser support for clear is not universal. I try to avoid it when
    > possible.


    I am usually comfortable using it. There is an issue with
    inheritance on Mac IE 5 which I bump up against now and then and
    could recall if I have to... something to do with clear being
    inherited in spite of child elements not being cleared or being
    specifically not cleared. Easy enough to fix for this browser
    with css that talks to it.

    Came across a little case of my own yesterday that puzzled me -
    excuse me OP - for a while and I dropped using clear: (though it
    seemed so right!), instead I used margins to solve the little
    problem. I am now thinking I have to think through the concepts
    of floats more!

    In case anyone is interested, I was supposing that when you have
    a box and float stuff in it, subsequent clears in that box would
    apply only to the floats in that box. But yesterday I had a clear
    that took account of another float outside the box. Or sure
    seemed to!

    Simple enough really though: page had a left floated nav col and
    a right content div box (margined to give the left nav float a
    formal space to sit in). Inside the div content box, at the very
    start I had a little float (to accommodate one drop-cap letter -
    it is all Farmer Joe's fault), for a little one line sentence.
    The point is that when I cleared the float for the next heading,
    the heading jumped down to clear the nav floated box. It is no
    good me knowing this is "correct" behaviour. I need to think
    about it more not to be puzzled! Perhaps I have missed something
    quite simple and if fixed, can go back to using clear properly!

    URL? OK (click on the link "Blue" and "Maroon" - there only
    temporarily to show some people possible backgrounds - to see the
    difference re clear):

    <http://members.optushome.com.au/droovies/khs/>

    --
    dorayme
    dorayme, Jan 8, 2007
    #7
  8. al jones

    mbstevens Guest

    On Mon, 08 Jan 2007 11:04:50 +1100, dorayme wrote:

    > In article <>,
    > mbstevens <> wrote:
    >
    >> Browser support for clear is not universal. I try to avoid it when
    >> possible.

    >
    > I am usually comfortable using it. There is an issue with
    > inheritance on Mac IE 5 which I bump up against now and then and
    > could recall if I have to... something to do with clear being
    > inherited in spite of child elements not being cleared or being
    > specifically not cleared. Easy enough to fix for this browser
    > with css that talks to it.



    It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    and completely unsupported in iCab 2.6-2.9.x.
    Not exactly a herd of people still using these, but
    I'm still holding off for a while.
    mbstevens, Jan 8, 2007
    #8
  9. al jones

    Bergamot Guest

    mbstevens wrote:
    >>
    >>> Browser support for clear is not universal.

    >
    > It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    > and completely unsupported in iCab 2.6-2.9.x.


    Do you honestly think that the 3 people on the planet still using any of
    these antiquated browsers haven't come across worse problems before now?
    I find it inconceivable that those users would be running with CSS
    enabled at all.

    --
    Berg
    Bergamot, Jan 8, 2007
    #9
  10. al jones

    mbstevens Guest

    On Sun, 07 Jan 2007 22:16:54 -0600, Bergamot wrote:

    > mbstevens wrote:
    >>>
    >>>> Browser support for clear is not universal.

    >>
    >> It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    >> and completely unsupported in iCab 2.6-2.9.x.

    >
    > Do you honestly think that the 3 people on the planet still using any of
    > these antiquated browsers haven't come across worse problems before now?


    This problem has no necessary relation to those problems. People with
    bad knees are still capable of fretting over hangnails.

    > I find it inconceivable that those users would be running with CSS
    > enabled at all.


    I find it conceivable.
    mbstevens, Jan 8, 2007
    #10
  11. al jones

    Ed Seedhouse Guest

    On Mon, 08 Jan 2007 03:36:22 GMT, mbstevens
    <> wrote:

    >On Mon, 08 Jan 2007 11:04:50 +1100, dorayme wrote:


    >>> Browser support for clear is not universal. I try to avoid it when
    >>> possible.


    >> I am usually comfortable using it.


    >It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    >and completely unsupported in iCab 2.6-2.9.x.


    Better stay away from CSS altogether then. Mosaic has lousy support for
    it too.
    Ed Seedhouse, Jan 8, 2007
    #11
  12. al jones

    al jones Guest

    On Mon, 08 Jan 2007 04:41:56 GMT, Ed Seedhouse wrote:

    > On Mon, 08 Jan 2007 03:36:22 GMT, mbstevens
    > <> wrote:
    >
    >>On Mon, 08 Jan 2007 11:04:50 +1100, dorayme wrote:

    >
    >>>> Browser support for clear is not universal. I try to avoid it when
    >>>> possible.

    >
    >>> I am usually comfortable using it.

    >
    >>It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    >>and completely unsupported in iCab 2.6-2.9.x.

    >
    > Better stay away from CSS altogether then. Mosaic has lousy support for
    > it too.


    Hey, guys, stop hijacking my thread!!! <chuckle>

    If you all have so much time on your hands would you mind looking at
    http://aljones.us/630817vad.html and seeing if you can help me get the
    images aligned on the left hand edge - regardlwss of the size of the
    viewport. I've gotten several suggestions, but none seem to work correctly
    in all situations and I've gotten a royal headache from it.

    //al
    al jones, Jan 8, 2007
    #12
  13. al jones

    mbstevens Guest

    On Sun, 07 Jan 2007 13:46:26 -0600, Bergamot wrote:
    > The suggestion above won't work in your case because you don't have
    > those images inside <p> elements.


    From the page in question:
    <p><a href="images/630904vad.jpg">
    <img alt="photo of this letter"
    src="images/630904vad_1.jpg" class="left-top" /></a>
    This is my birthday. Here in camp on the Rappahannock River in front of
    Lee's army. I wrote a letter to my dear wife today, have not heard from
    home since I left there.</p>

    *Some* images are not inside <p> elements. It won't work for them.
    mbstevens, Jan 8, 2007
    #13
  14. al jones

    mbstevens Guest

    On Sun, 07 Jan 2007 22:55:18 -0600, al jones wrote:

    > On Mon, 08 Jan 2007 04:41:56 GMT, Ed Seedhouse wrote:
    >
    >> On Mon, 08 Jan 2007 03:36:22 GMT, mbstevens
    >> <> wrote:
    >>
    >>>On Mon, 08 Jan 2007 11:04:50 +1100, dorayme wrote:

    >>
    >>>>> Browser support for clear is not universal. I try to avoid it when
    >>>>> possible.

    >>
    >>>> I am usually comfortable using it.

    >>
    >>>It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
    >>>and completely unsupported in iCab 2.6-2.9.x.

    >>
    >> Better stay away from CSS altogether then. Mosaic has lousy support for
    >> it too.

    >
    > Hey, guys, stop hijacking my thread!!! <chuckle>


    Yeah, I know. We're just exercising each other.
    >
    > If you all have so much time on your hands would you mind looking at
    > http://aljones.us/630817vad.html and seeing if you can help me get the
    > images aligned on the left hand edge - regardlwss of the size of the
    > viewport. I've gotten several suggestions, but none seem to work correctly
    > in all situations and I've gotten a royal headache from it.
    >
    > //al


    First, either get all the images of letters inside <p> elements, or get
    them all outside them. You won't get any kind of consistency until you do
    that.
    mbstevens, Jan 8, 2007
    #14
  15. al jones

    Bergamot Guest

    mbstevens wrote:
    > On Sun, 07 Jan 2007 22:55:18 -0600, al jones wrote:
    >
    >> http://aljones.us/630817vad.html and seeing if you can help me get the
    >> images aligned on the left hand edge

    >
    > First, either get all the images of letters inside <p> elements, or get
    > them all outside them. You won't get any kind of consistency until you do
    > that.


    That alone won't help. The h3 and paragraph that follow the image are to
    show beside the photo. All other h3's are to clear the photo.

    p img {clear:left} as you suggest won't give that result.

    To the OP, I made a couple suggestions elsewhere in this thread.

    --
    Berg
    Bergamot, Jan 8, 2007
    #15
  16. al jones

    mbstevens Guest

    On Mon, 08 Jan 2007 07:06:54 -0600, Bergamot wrote:

    > mbstevens wrote:
    >> On Sun, 07 Jan 2007 22:55:18 -0600, al jones wrote:
    >>
    >>> http://aljones.us/630817vad.html and seeing if you can help me get the
    >>> images aligned on the left hand edge

    >>
    >> First, either get all the images of letters inside <p> elements, or get
    >> them all outside them. You won't get any kind of consistency until you do
    >> that.

    >
    > That alone won't help. The h3 and paragraph that follow the image are to
    > show beside the photo. All other h3's are to clear the photo.
    >
    > p img {clear:left} as you suggest won't give that result.
    >
    > To the OP, I made a couple suggestions elsewhere in this thread.


    Which included:

    "One thing you could do is to put the <a> and image inside the associated
    h3 element. Adding a clear:left to all h3's should always put the next
    entry below any images.
    <h3><a href...><img...></a>Thur. Aug. 20, 1863</h3>

    h3 {clear:left}
    h3 img {float:left; margin:...}

    The other option is to add a class selector to each h3 that specifically
    needs to be cleared, or add an inline style to them."

    ....breaking semantic markup completely. Those images are not headers.
    What they are semantically are images that are associated with the
    paragraphs that fall under the header. Logos, under some circumstances,
    might be considered a part of a header. But these images, if you bother
    to actually read the page, are just clearly not headers.
    mbstevens, Jan 8, 2007
    #16
  17. al jones

    mbstevens Guest

    On Sat, 06 Jan 2007 21:24:21 -0600, al jones wrote:

    > The problem I'm asking for help with, specifically, is best demonstrated in
    > http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    > css because the images of the diary entries, where longer than the
    > assiciated text, would force the next image to the right. I inserted a
    > clear left to the <p> tag, which gives me the display you see now.
    >
    > Obviously <hah??> what I'd like to see is the image on the left, with the
    > associated text to the right. If the image is longer, then force the
    > following image / text pair down until the image places itself properly to
    > the left.


    Here. This tests fine on my laptop's newest version of IE, and in Linux
    Firefox and Windows Firefox. You might want to make a version in HTML 4
    -- not sure how it would react in older versions of IE, since this one
    presents in xml, which throws IE into quirks mode. You'll need to move all
    the images of letters into the paragraphs if you modify your page to work
    like this one does.

    http://www.mbstevens.com/test/vad.html
    mbstevens, Jan 8, 2007
    #17
  18. al jones

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > On Sat, 06 Jan 2007 21:24:21 -0600, al jones wrote:
    >
    > > The problem I'm asking for help with, specifically, is best demonstrated in
    > > http://aljones.us/630817vad.html I've introduced a 'clear left' into the
    > > css because the images of the diary entries, where longer than the
    > > assiciated text, would force the next image to the right. I inserted a
    > > clear left to the <p> tag, which gives me the display you see now.
    > >
    > > Obviously <hah??> what I'd like to see is the image on the left, with the
    > > associated text to the right. If the image is longer, then force the
    > > following image / text pair down until the image places itself properly to
    > > the left.

    >
    > Here. This tests fine on my laptop's newest version of IE, and in Linux
    > Firefox and Windows Firefox. You might want to make a version in HTML 4
    > -- not sure how it would react in older versions of IE, since this one
    > presents in xml, which throws IE into quirks mode. You'll need to move all
    > the images of letters into the paragraphs if you modify your page to work
    > like this one does.
    >
    > http://www.mbstevens.com/test/vad.html


    Para text does not show (except one instance).

    Perhaps this is more aligned:

    <http://members.optushome.com.au/droovies/test/vad.html>

    --
    dorayme
    dorayme, Jan 8, 2007
    #18
  19. al jones

    mbstevens Guest

    On Tue, 09 Jan 2007 08:26:50 +1100, dorayme wrote:

    > Para text does not show (except one instance).


    Interesting. What browser were you using?
    >
    > Perhaps this is more aligned:
    >
    > <http://members.optushome.com.au/droovies/test/vad.html>
    mbstevens, Jan 8, 2007
    #19
  20. al jones

    mbstevens Guest

    On Mon, 08 Jan 2007 21:38:35 +0000, mbstevens wrote:

    > On Tue, 09 Jan 2007 08:26:50 +1100, dorayme wrote:
    >
    >> Para text does not show (except one instance).

    >
    > Interesting. What browser were you using?
    >>
    >> Perhaps this is more aligned:
    >>
    >> <http://members.optushome.com.au/droovies/test/vad.html>


    Oh, I see what you're saying now. You want the text following each
    individual image to move down. Yes, that's a nice enhancement.
    mbstevens, Jan 8, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Anonymous User
    Replies:
    0
    Views:
    361
    Anonymous User
    Jul 9, 2005
  2. Gaurav
    Replies:
    12
    Views:
    618
    Karl Heinz Buchegger
    Oct 17, 2003
  3. David

    Response.Clear() doesn't clear

    David, Jan 31, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    1,018
    Mark Fitzpatrick
    Jan 31, 2008
  4. InvalidLastName

    Unrecognized element 'add' after <clear></clear>

    InvalidLastName, Feb 26, 2007, in forum: ASP .Net Web Services
    Replies:
    3
    Views:
    957
    Steven Cheng[MSFT]
    Mar 6, 2007
  5. Ryan Macy

    Ideas needed & help needed!

    Ryan Macy, Jul 19, 2006, in forum: Ruby
    Replies:
    2
    Views:
    506
    Ryan Macy
    Jul 19, 2006
Loading...

Share This Page