Top and bottom margins unexpectedly not rendered in Internet Explorer 8

The relevant CSS code for this page is:

body
{
margin: 0;
}

#mainWrapper
{
border: 1px solid red;
margin: 10%;
}

Actual results for this webpage testcase:
- in IE 6 and in IE 7, there is no bottom margin below the red bottom-border of this webpage
- in IE 8 beta 1, there is no top margin at the top of the red top-border of this webpage and there is no bottom margin below the red bottom-border of this webpage.

Expected results:
there should be a 10% margin (approx. 100px) surrounding all 4 sides of the red bordered box in this webpage. So, there should be a 10% margin at the top of the red top-border of this webpage and there should be a 10% bottom margin below the red bottom-border of this webpage.

Firefox 2.x, Firefox 3, Opera 9.26, Opera 9.50, Safari 3.1, Seamonkey 1.x, Seamonkey 2.x, NS 7.0, NS 7.2, K-meleon 1.x, Konqueror 3.5.8, Epiphany 2.22, Galeon 2.0.4, Hv3 TKHTML alpha 16, Amaya 10.0 build 20080229 all pass this test.

Credit must go to Dorayme for posting this issue in comp.infosystems.www.authoring.stylesheets forum discussion newsgroup the IE 7 Margin Problem message and for his No Expected margin bottom in IE 7 testcase

The relevant CSS code for this page is:

body
{
margin: 0;
}

#mainWrapper
{
border: 1px solid red;
margin: 10%;
}