Previous Message
Next Message

body: margin=0 and padding=0, not working in Firefox or Opera - Problem solved

Sent by Gunlaug_Sørtun on 20 March 2006 01:01


SED wrote:
> I found out why the extra empty line showed up in Firefox and Opera. 
> The margin and padding for <p> tag must also be set to zero, not only
> <body>. Weird, but it works.

If that works for you, then fine.

For others who experience this (as a) problem, but want to play freely
with margins of _some size_ on paragraphs and other elements:

The 'protruding margins' / 'collapsing margins' (same thing) are better
sorted out by applying a 'margin-top: 1px;' on body. A negative
margin-top the same size, will cover up any unwanted offset created by
such a small padding if _that_ becomes a problem.

IE/win doesn't show the mentioned "gap", because body is given 'Layout
by default'[1] in that browser. That's the buggy part of 'Layout'. IE
may show such "gaps" on other elements that doesn't have / isn't given
'Layout'.

This non-standard 'engine-inherent rendering concept' effect in IE
points back to the fact that 'collapsing margins'[2] are contained in
the outer container - in this case body - _if_ the outer container is
styled to establish a 'block formatting contexts'[3] (which is the
closest thing to 'Layout' in standard CSS). Studying those two
parts of the CSS specs, should make it perfectly clear what's happening
and what can be done about it.

Applying such a 'block formatting contexts' style on body isn't always
working too well in all browsers, but applying it on the next main
container inside body - usually a wrapper-div in most layouts - will
have the same effect.

Anyway; the simple addition of a 1px padding on top and/or bottom of the
*right* container(s), will "fix" the "problem" in all browsers.

regards
	Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html#elem
[2]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
-- 
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/
Previous Message
Next Message

Message thread: