I noticed in IE7 that if I expanded the window larger than the launch size, p#container-1234 will jump up next to p.box .

First off, I was wondering why?

Secondly, I tried (in my humble newbie way) to apply the clear:right; declaration to the p.box rule and it still floats up that way.

I would like to understand why it acts this way. I am probably adding too much confusion to my learning here but I can't seem to get past the 'why' to move on in the book :)

Thanks,



G.Blakeney

hi,

i'm not by any means an expert, but i think i know the answer to your question.

first off, you're right in that this bit of code will NOT display right in ie 7. however, it WILL in firefox 2.0. so, i'm thinking there is something wrong with how ie 7 is rendering these rules.

and the clear:right rule will only work if you've applied a float:right rule. so, it won't help you at all in this case.

is that a good enough answer for you to continue reading the book and not worry about this one thing that might be unrelated to css, but is instead an ie 7 bug??

Sounds good clue!

Thanks - I knew I did not understand the declaration completely, just monkeyed around some.

I am really enjoying learning this CSS stuff.:D

G.Blakeney

I haven't looked at the code again in IE7 (I don't have it handy and running) but, it sounds like another IE float bug.

A clear: left; for a corresponding float: left; should completely reset the float. That is to say, floating elements that appear after the clear: left; should never float higher than the element bearing the clear: left; declaration.

Of course, as you'll have seen throughout this book, sometimes IE has its own way of doing things. ;)

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html