Linden A. Mueller wrote:

> * Could you explain or point me to a site that clearly explains the 
> collapsing margins thing?

Don't know how "clear" you'll find the explanation here...
<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
...but it is the official version.

To expand on the solution I used:
The problem with margins is that they are invisible - we can only see
the effects of having them. If there's no or an illogical effect of
declared or otherwise known vertical margins, then the chance is they
have escaped their parent - the immediate container - and collapsed into
its or another element's vertical margin.

IE6/7 contains margins in containers that has a 'hasLayout' trigger
applied, while other browsers need a more standardized method.
Vertical margins won't escape through paddings greater than zero, so
declaring top and bottom paddings on a container will contain vertical
margins on its immediate children.

> * "IE6/7 don't support CSS table": Thanks. Didn't know that.

Thought so.
FYI: IE8 does support CSS table, and will render your page just fine.
You can get an idea of CSS support in various IE versions here...
<http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx>

> * "trigger 'hasLayout' in IE6/7": I figured it was something to do 
> with hasLayout, but since I don't fully understand that, I wasn't
> sure what to do to fix this particular problem

Well, a table-cell is a block-element lining up in line - inline, and
when we want to mimic that, the 'inline-block' is the closest thing that
IE6/7 support.
The problem is that IE doesn't really support 'inline-block' properly,
so we have to trick it a bit.

The 'display: inline-block' acts as a 'hasLayout' trigger, and gives us
a block-element with defined area. Any 'hasLayout' trigger will have
that effect, but I find 'inline-block' most suited since that's what I
wanted as outcome - but IE won't handle the 'inline' part properly.

So, in a following and separate rule I declare 'display: inline', and
finally IE understands the message: "I want a block-element with
'Layout' that lines up in line with the others."
(Debugging IE has always been fun... :-) )

> * What do you mean by "cross-browser margins on paragraphs"?

IE7 and older have no default top-margin on paragraphs, while all other
browsers have one. So relying on defaults gives varying results across
browser-land. Better declare our own margins if we want all browsers to
render with the same ones.

> * Glad to hear that someone saw what the <b></b> are for! :)

:-) ... and a <b> is equivalent to <span> in most cases, but the former
is given default styling for *bold* by most browsers, while the latter
has no default styling.

regards
        Georg
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to