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: 18p开发者_开发知识库x;
}
#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.
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
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;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
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 :)
I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)
加载中,请稍侯......
精彩评论