Russell Baldwin wrote:
> Does anyone have any idea how to get rid of the gaps between the jello
> layers? Seen in Firefox and other browsers, in this example it is the
> body showing through and it is coloured brown.
[...]
> Test website is:
> http://www.shoesforindustry.net/test/
>
> Many thanks in advance,
>
> Russ
Hi Russell as a temporary test paste this into your style sheet.
#contents, #footernav, #footer {
margin-top:-15px !important;
margin-bottom:-15px !important;
}
#header, #mainmenu {
margin-top:-20px !important;
margin-bottom:-20px !important;
}
What this does is cancels out the default vertical margins that are collapsing
[1] out of there containers. The collapsing margins can be contained by giving
the containers vertical borders or padding or using the overflow property.
Please note that borders or padding will work well but if the containers also
have hasLayout [2] then all problems happen in IE5~IE7. I have a test case [3]
dealing with collapsing (default) vertical margins and IE. Examining each
example in IE7 and then Firefox will show a big difference. The same is
happening in your demo, take a look at it in IE5~IE7 and notice that no brown
can be seen. For starters I would suggest adding padding to the #header div.
#header {
padding-top:1px;
padding-bottom:1px;
}
[1] <http://www.w3.org/TR/CSS21/box.html#x26>
[2] <http://www.satzansatz.de/cssd/onhavinglayout.html>
[3] <http://css-class.com/test/css/box/margins/iehaslayoutmargins.htm>
Alan
http://css-class.com/test/bugs/ie/ie-bugs.htm
______________________________________________________________________
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/
