SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem doesn't really have anything to do with the reset but is caused by the top margin on your container here.
    Code:
    #container {
        width:900px;
        margin:70px 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.

    Code:
    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).

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •