Netscape vs IE (again): clear property

[my-wings]

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

 

[Steve Pugh]

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

 

[Stephen T. Fox]

In my-wings <[email protected]> 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.

 

[my-wings]

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]

In my-wings <[email protected]> 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

 

[Stephen T. Fox]

In my-wings <[email protected]> typed:
:| :| > In :| > my-wings <[email protected]> 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.