Search code examples
htmlcssexternalcenter

margin: 0 auto; not working when linked to external css

When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.

The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.

the wrapper css:

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
}

and the html (minus content):

<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="nav">
        </div>
        <div id="content">
            <div id="cont_left">
            </div>
            <div id="cont_right">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

Any help or advice would be great.

EDIT: here is the full css:

#wrapper {
width: 960px;
margin: 0 auto;
}

#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}

#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}

#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}

#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}

#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}

#nav_bar li {
display: inline;
padding-left: 58px;
}

#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}

#nav_bar li a:hover {
color: #fff;
background-color: #666;
}

.current {
color: #CCC;
}

#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}

#cont_left {
width: 40%;
margin: 48px;
float: left;
}

#cont_right {
width: 40%;
margin: 48px;
float: right;
}

#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}

#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}

#footer_list li {
display: inline;
padding: 18px;
}

#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}

#footer_list li a:hover {
color: #000;
text-decoration: underline;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}

body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}

EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.

Solution

  • It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;

    1. Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/

    2. Do you have multiple css files? If so, try to include this stylesheet last.

    3. Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).

    I would love to see your entire solution if possible, so i can poke around :)