[EMAIL PROTECTED] wrote:
> Now I feel retarted, such a simple fix and I was pulling my hair out
> over it last night.
Wrong term :-) and used in the wrong situation ;-)
All "fixes" are simple once one know how they work and should be
implemented.
You only lost some hair during one night. No big deal :-)
I have little hair left after having spent a few thousand nights - and
even some daytime - on troubleshooting over the years. Think I started
working with 'logical engines' back in 1962 (or around there somewhere)...
Now it's your turn. You can start by catching up on some background for
'today's CSS'[4] (links at the bottom) - in case you like long reads.
> Georg the two links below your name were very helpful.
>
> After reading through them, I dont understand why the right columns
> padding needs to be set to 1px. I tried setting padding top to 0px
> but It does not have the same result.
>
> I was wondering if this could be explained easily
Don't know. I have never tried... ;-)
It is actually written in the first paragraph on 'collapsing margins'[1]
in the first parenthesis...
" In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, *padding or border* areas or
clearance separate them) of two or more boxes (which may be next to one
another or nested) combine to form a single margin. "
Might be a bit difficult to understand, but /any/ padding, or border,
that is _wider than zero_ , will prevent the margins that are set by
CSS, or by browser-default, on elements inside the container, from
_escaping_ that container.
Think of that 'padding: 1px' as a separator, in that it prevents two
vertical margins from _touching_ each other and 'collapse' into one,
single, large margin.
That's why a 'padding: 0;' won't work, as '0' means there's *no* padding
there at all = *no* separation = *no* effect.
---
The problem with 'collapsing margins' is that the
resulting margin often ends up in the wrong place from a design
view-point, so we need means to contain and control them.
In additions to paddings and borders, we also have 'Block formatting
contexts'[3] as a mean to contain margins. That's what I used 'display:
table' for in the example-code.
IE/win doesn't support much of that standard-formula, but its
'hasLayout'[2] bug can be utilized to achieve /similar/ results. You
already had a 'hasLayout' trigger since you had given the wrapper a
width, so I only had to give standard-compliant browsers a standard CSS
declaration.
---
It may be a bit problematic to find the right element to add such a
'separator' or 'block formatting' declaration to, as 'collapsing
margins' are often only visible as strange 'gaps'. Just make sure you
delete those attempts that doesn't work at all, and be careful which
'separator' and/or 'block formatting' declaration you use since they
also have other, standardized, effects.
The rest may sometimes be like a bit of "trial and error", but there is
some (a tiny bit of) logic behind 'collapsing margins', so they become
easier to control even in complex cases, with a bit of experience.
---
I know some say that the entire problem can be "avoided" by zeroing out
margins on paragraphs and such. I don't think much of such "avoid" as
general solutions for 'collapsing margins' or anything else, as one will
never learn how to stay in control if "avoid" is the solution for every
problem. Sometimes an "avoid" might be quite ok though :-)
regards
Georg
>> [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
>> [2]http://www.satzansatz.de/cssd/onhavinglayout.html
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
[4]http://people.opera.com/howcome/2006/phd/
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
