Sent by Mark Wheeler on 9 August 2006 00:12
Thank you so much for the explanation. I understand, now.
Mark
---------------
On Aug 8, 2006, at 3:27 PM, Gunlaug Sørtun wrote:
Ok, two in one since it is the same case.
Mark Wheeler wrote:
> First off, thank you to Michael for putting my script up on a site.
> Sorry about that. I forgot that's the way to go. It's been a while
> since I've been here.
> Second, Gunlaug - That did the trick. I'm still fairly new at css,
> trial and error and all that. I never would have thought about
> using the overflow attribute to contain the div. I skimmed through
> the w3.org info and didn't fully understand it. I need to read it
> some more I guess. But in a nut shell (If that's possible) why doe
> the overflow: hidden make the float work as I wanted it to?
Well, the answer is in the text: "... establish new block formatting
context".
<http://www.w3.org/TR/CSS21/visuren.html#q15>
That means (among other things) "complete separation" or "isolation"
from its surroundings, while the container itself behaves in the
page-layout as the styling says.
The one I used: 'overflow: hidden;' does just that and nothing else,
which makes it practical in some cases but definitely not in others.
Example: I can't use 'overflow: hidden;' all that often because it would
cut off my many "over the edge" elements like titles and such.
See on: <http://www.gunlaug.no/contents/wd_example_01_04.html> how that
will turn out.
This example: <http://www.gunlaug.no/contents/wd_example_01_03.html> use
'display: table/table-cell', but there are some differences between
browsers for that one too.
I use 'float:left/right' whenever I can (or have to), as floats work
quite well across browser-land - even in IE/win. Of course: not
everything can be floated, so the other alternatives are good to have.
Michael Geary wrote:
> So I understand why the "overflow: hidden;" fixed it, but could you
> explain what the IE-specific "zoom: 1;" is for? I tried leaving it
> out and IE still looked OK. I put it back in "just in case" but would
> like to understand what its purpose is. Thanks!
The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It
does (of course) not validate, but it is one of the few triggers that
isn't likely to give negative side-effects - almost regardless of layout
it is used on.
>> 'Not quite the same standard', for IE/win only: <http://
>> www.satzansatz.de/cssd/onhavinglayout.html> The choice of hack (or
>> not) depends on entire layout in each case.
> Yes, I've studied that page too - it's a great piece of research.
> In this particular case, my page looked OK in IE but was bad in
> Firefox, so an IE hack wouldn't have helped - but the overflow trick
> was just the ticket.
If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.
Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/