Alan Chandler wrote:
> Thank you, it works
> However, I am still stuggling to understand
No wonder, as the mechanisms involved are used by many, but have not
been well documented anywhere -- until now.
We investigated these mechanisms while looking for /similarities/
between a well known "fix" for some IE6 bugs-- using 'hasLayout', and
CSS 'block formatting contexts', since we needed some standard-compliant
solutions and workarounds for those proprietary MSIE constructs.
> a) Why exactly clear:both is having the effect it has, and
In your page; 'body' itself is the limit for what standard-compliant
browsers will calculate 'clear: both' to be affected by. The floating
menu is within that range -- unless some other limitation or isolation
> b) Why the new stuff isolates it.
I'm utilizing W3C standards 'block formatting contexts' to create 'an
"isolated box" next to floats'. IE/win gets its own 'hasLayout'
trigger that'll act /pretty much/ the same way.
Margins are applied to the "isolated box" itself, instead of its
content, and relates to the margin-edge of the floating menu. That
explains the changed margins. IE/win is still buggy though, and IE5.0
will choke on 'overflow: hidden;' (hide everything), so they get an
Your thinking isn't far off :-) , but, as usual: 'the devil is in the
details'. Besides; standards are changing and browsers are buggy. Study
the linked documentation well for complete understanding of how it
works, and why I've used 'the exact solution' to solve this case.
I would normally design a page like yours as a 'float-construct', which
would avoid the use of 'clearfix' and other "fixes" altogether since
floats "isolates" and "expands to contain" according to CSS-specs.
However, that would mean reconstructing your entire page so I didn't see
that as an option.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/