0

Problem: margin: 0 auto does not work on body. background-color: #EEEEEE on the other hand, is working even though they are on the same block.

index.php:

<html>

    <head>
        <title>MForte</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">
    </head>

    <body id="container">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>

</html>

reset.css:

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

bodyStyleSheet.css:

#container {
    margin: 0 auto;
    background-color: #EEEEEE;
}

What I have tried:

1) Swapping <link rel="stylesheet" type="text/css" href="css/reset.css"> and <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css"> to each other.

2) Removed the id of the body from the index.php file and replaced the #container by body

3) To test the scenario, since border: 0 is declared on reset.css, I tried to create a table on index.php containing 2 rows. border: 1 is declared on reset.css in the table tag. Border didn't show.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Michael 'Maik' Ardan
  • 4,213
  • 9
  • 37
  • 60
  • You've done nothing to stop `body` from simply taking up the entire width allowable, so that's why `margin: 0 auto;` won't do anything. First fix the width of `body` so that it is not as wide as `html`, and you will see the `margin` doing something. – Ming Dec 19 '13 at 06:42
  • http://stackoverflow.com/questions/3170772/ – Dagg Nabbit Dec 19 '13 at 06:42

2 Answers2

4

Your approach is wrong, you are trying to horizontally center body element which has a default width of 100% so even if you want to horizontally center the body you cannot, as it is 100% in width and actually designers never center the body tag.. so if you want, nest a container div inside the body element, assign some fixed width and than use margin: 0 auto;. So alter your DOM like

<body>
   <div id="container">
   </div>
</body>

#container {
   width: 1000px;
   margin: 0 auto;
}

Also, if you are looking to apply background to entire viewport than leave the background property on the body element, if you want the background only for the horizontally centered element than move the background property in #container

Also, CSS reset has nothing to do with this, CSS Reset is used to reset the default styles applied by browser stylesheet, some prefer to use universal * selector to reset margin and padding and some do reset the outline as well like

* {
   margin: 0;
   padding: 0;
   outline: 0;
}

But some prefer CSS Reset Stylesheets which minimizes cross browser differences to minimal.. So you can opt for any option.

Last but not the least, you are talking about the overriding, using Reset stylesheet, those stylesheet always uses minimal specificity selectors, using class or id will make your selectors anyways specific than the selectors used in the Reset Stylesheet, so don't use !important unless required unless you will end up in a mess, better use specific selectors.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Hi Mr. Alien, thanks for a fast response. Setting a fixed width to the body resolved my problem. Also, thank you for pointing some other important factors. One last question, I also tried to create a table settings the border size on table {} at reset.css but didn't show upon rendering. What could possible go wrong with that? – Michael 'Maik' Ardan Dec 19 '13 at 06:48
  • @MichaelArdan Edited my answer, and don't use fixed `width` on `body`, consider using a container element instead – Mr. Alien Dec 19 '13 at 06:51
0

Use !important in css/bodyStyleSheet.css

such as 

#container {
    margin: 0 auto;
    background-color: #EEEEEE !important;
}

Good article on Smashing Magazine here

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

Oliver M Grech
  • 3,071
  • 1
  • 21
  • 36