Netscape vs IE (again): clear property

Discussion in 'HTML' started by my-wings, Jun 8, 2004.

  1. my-wings

    my-wings Guest

    This is my last try before caving and going back to tables to align these
    pages.

    Here is the problem page:
    http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml

    The page is divided as follows: below the navigation bar, "DIV.sidebar"
    floats left and holds the side menu. "DIV.bodytext" holds the rest of the
    page. Within "DIV.bodytext" are a sequence of picture/paragraph pairs, each
    pair followed by a horizontal rule. Each set -- picture (floating left),
    paragraph, and horizontal rule -- is enclosed by "DIV.va" tags. The
    horizontal rule is set to "clear: both" and "width: 100%".

    It looks fine in Netscape Navigator 7.1. In IE 6.0, there is a large space
    below the first picture/paragraph combination before the second one starts.
    (This will be most evident if your browser is sized so that the text is
    shorter than the photograph in the first picture/paragraph set.)

    This is because in Netscape, the horizontal rule only "clears both" sides
    within the "DIV.va" tag, but in IE, the horizontal rule waits to print until
    it's also cleared the "DIV.sidebar tag."

    I've tried every permutation I can think of (HR's inside or outside the
    "DIV.va" tag, "clear: both" or "clear: none", completely removing the HR's)
    and I just can't get this to work.

    Can anyone see anything I'm overlooking? I would appreciate any suggestions
    or comments.

    Alice
     
    my-wings, Jun 8, 2004
    #1
    1. Advertising

  2. my-wings

    Steve Pugh Guest

    "my-wings" <> wrote:

    >http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml
    >
    >It looks fine in Netscape Navigator 7.1. In IE 6.0, there is a large space
    >below the first picture/paragraph combination before the second one starts.
    >(This will be most evident if your browser is sized so that the text is
    >shorter than the photograph in the first picture/paragraph set.)
    >
    >This is because in Netscape, the horizontal rule only "clears both" sides
    >within the "DIV.va" tag, but in IE, the horizontal rule waits to print until
    >it's also cleared the "DIV.sidebar tag."


    As far as I can see IE and Opera are correctly applying the CSS 2
    spec: clear should clear _all_ earlier floats, not just those in the
    same containing block. Mozilla is wrong.

    http://www.w3.org/TR/CSS2/visuren.html#propdef-clear

    One solution would be to wrap the content and sidebar in a div with
    position: relative; and then absolutely position the sidebar in the
    left-margin of the content. This way the only floats are those inside
    the content.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 8, 2004
    #2
    1. Advertising

  3. In news:SS8xc.46125$,
    my-wings <> typed:
    :| This is my last try before caving and going back to tables to align
    :| these pages.
    :|
    :| Here is the problem page:
    :| http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml
    :|
    :| The page is divided as follows: below the navigation bar,
    :| "DIV.sidebar" floats left and holds the side menu. "DIV.bodytext"
    :| holds the rest of the page. Within "DIV.bodytext" are a sequence of
    :| picture/paragraph pairs, each pair followed by a horizontal rule.
    :| Each set -- picture (floating left), paragraph, and horizontal rule
    :| -- is enclosed by "DIV.va" tags. The horizontal rule is set to
    :| "clear: both" and "width: 100%".
    :|
    :| It looks fine in Netscape Navigator 7.1. In IE 6.0, there is a large
    :| space below the first picture/paragraph combination before the
    :| second one starts. (This will be most evident if your browser is
    :| sized so that the text is shorter than the photograph in the first
    :| picture/paragraph set.)
    :|
    :| This is because in Netscape, the horizontal rule only "clears both"
    :| sides within the "DIV.va" tag, but in IE, the horizontal rule waits
    :| to print until it's also cleared the "DIV.sidebar tag."
    :|
    :| I've tried every permutation I can think of (HR's inside or outside
    :| the "DIV.va" tag, "clear: both" or "clear: none", completely
    :| removing the HR's) and I just can't get this to work.
    :|
    :| Can anyone see anything I'm overlooking? I would appreciate any
    :| suggestions or comments.
    :|
    :| Alice

    I just tried
    div.va hr (color:#03f;
    height:3px;
    width:100%;
    clear:right;
    }
    in IE. Try it, you'll like.

    Say Hi to Don.


    --
    **********
    Stephen
     
    Stephen T. Fox, Jun 8, 2004
    #3
  4. my-wings

    my-wings Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "my-wings" <> wrote:
    >
    > > http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml
    > >
    > >...in Netscape, the horizontal rule only "clears both" sides
    > >within the "DIV.va" tag, but in IE, the horizontal rule waits to print

    until
    > >it's also cleared the "DIV.sidebar tag."

    >
    > As far as I can see IE and Opera are correctly applying the CSS 2
    > spec: clear should clear _all_ earlier floats, not just those in the
    > same containing block. Mozilla is wrong.
    >
    > http://www.w3.org/TR/CSS2/visuren.html#propdef-clear
    >
    > One solution would be to wrap the content and sidebar in a div with
    > position: relative; and then absolutely position the sidebar in the
    > left-margin of the content. This way the only floats are those inside
    > the content.
    >


    This worked great. In fact, I just moved the div.sidebar inside the
    div.bodytext and set the position to absolute with a left margin of 2.5%
    (since the navigation bar directly above is at 95% width). Now it works
    fine in both IE and Netscape. I hope the extra div tag you mentioned (or a
    top measurement) isn't needed by some browser I don't have. Otherwise, both
    Netscape and IE are behaving.

    Results are here:
    http://www.mywingsbooks.com/coll-terms/TEST_HRinside2.shtml

    Thanks so much!

    Alice
     
    my-wings, Jun 9, 2004
    #4
  5. my-wings

    my-wings Guest

    "Stephen T. Fox" <> wrote in message
    news:Hwlxc.621$...
    > In news:SS8xc.46125$,
    > my-wings <> typed:
    > :| This is my last try before caving and going back to tables to align
    > :| these pages.
    > :|
    > :| Here is the problem page:
    > :| http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml
    >
    > I just tried
    > div.va hr (color:#03f;
    > height:3px;
    > width:100%;
    > clear:right;
    > }
    > in IE. Try it, you'll like.
    >
    > Say Hi to Don.
    >


    Thanks for the response. It does work as long as the text is longer than the
    picture, but it gave me problems when the picture was longer than the text.
    I finally managed to make it behave with "position: absolute."

    Who's Don, by the way?

    Alice
     
    my-wings, Jun 9, 2004
    #5
  6. In news:9stxc.30031$,
    my-wings <> typed:
    :| "Stephen T. Fox" <> wrote in message
    :| news:Hwlxc.621$...
    :| > In news:SS8xc.46125$,
    :| > my-wings <> typed:
    :| > :| This is my last try before caving and going back to tables to
    :| > :| align these pages.
    :| > :|
    :| > :| Here is the problem page:
    :| > :| http://www.mywingsbooks.com/coll-terms/TEST_HRinside.shtml
    :| >
    :| > I just tried
    :| > div.va hr (color:#03f;
    :| > height:3px;
    :| > width:100%;
    :| > clear:right;
    :| > }
    :| > in IE. Try it, you'll like.
    :| >
    :| > Say Hi to Don.
    :| >
    :|
    :| Thanks for the response. It does work as long as the text is longer
    :| than the picture, but it gave me problems when the picture was
    :| longer than the text. I finally managed to make it behave with
    :| "position: absolute."
    :|
    :| Who's Don, by the way?
    :|
    :| Alice

    Sorry, Alice. I got your site confused with the post by Don@NoSpam. Anyway,
    I'm glad someone was able to help you.


    --
    **********
    Stephen
     
    Stephen T. Fox, Jun 9, 2004
    #6
    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. Tom
    Replies:
    0
    Views:
    510
  2. Mickey Segal
    Replies:
    1
    Views:
    688
    Mickey Segal
    May 21, 2004
  3. David

    Response.Clear() doesn't clear

    David, Jan 31, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    1,114
    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:
    1,066
    Steven Cheng[MSFT]
    Mar 6, 2007
  5. yaktipper
    Replies:
    10
    Views:
    304
    Richard Cornford
    Jul 10, 2003
Loading...

Share This Page