Problem with reset

http://mayacove.com/dev/css/reset/

this line in reset is causing problems:
html {color:#000; background:#fff; }

only way it works as it should is if I add a border around <body>
http://mayacove.com/dev/css/reset/index2.html (i.e., THEN it respects body margin:0; and padding:0;

this doesn’t make much sense… even if I add margin:0; padding:0; to html rule in reset it doesn’t work…

but if I remove this line altogether
html {color:#000; background:#fff; margin:0; padding:0;}

then problem is solved…

at work they force me to use resets… I hate resets; they’re more trouble than they’re worth…

thank you…

Hi,

The problem doesn’t really have anything to do with the reset but is caused by the top margin on your container here.


#container {
    width:900px;
    [B]margin:70px[/B] auto 20px auto;
    height:800px;
    border:solid 1px red;
}

That margin collapses onto the body and moves the body down the page by 70px.

You can stop the margin collapse by adding a 1px padding top to the body element.


body{padding:1px 0 0}

As a rule of thumb don’t add any styles to the html element except for removing margin and padding. All other styles should go on the body element instead (e.g. background-color).

oh brother… thank you very much…

so what I did is add padding-top:17px to the body and took out margin-top from main container…

(also left only padding:0 and margin:0 in html rule…)

I had read about collapsing margins before, but somehow it didn’t occur to me it applied here…

thank you very much…