while building the basics of my website (header, footer and basic body) I was collecting the css on the various pages (header css in the header file, footer in the footer, etc) and now that I've copied and pasted everything in there it's changed the site. For example the body is now at 100% width of the page, but it is supposed to be 70% and the footer is supposed to be aligned with the body on the left, but it is about 20px to the left of where it should be, etc. You can see what im talking about at my test site http://sunnahmatch.com or by filtering through this large collection of css (if you need the html & php code let me know):
<style type="text/css">
#body_container{
margin: 200px auto 0 auto;
width:70%;
}
.footer_inline a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
#header{
margin:0;
padding:0;
width:100%;
background-color:#333;
}
#logo{
margin:0;
padding:0;
float:left;
}
#header_menu{
margin:0;
padding:0;
background-image:url(../img/header_bg_logo.jpg);
float:right;
width:380px;
height:100px;;
}
#menu_bar{
background:url(../img/menu_bar.png);
background-repeat:repeat-x;
width:100%;
float:left;
height:42px;
margin:0;
padding:0;
}
#menu_text_container{
padding-top:8px;
padding-bottom:6px;
vertical-align:middle;
}
.menu_text{
float:left;
}
.menu_text_span{
margin-left:30px;
font-family: GeosansLight;
}
.menu_text a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text_span_top{
margin-right:20px;
margin-top:10px;
float:right;
font-family: GeosansLight, sans-serif;
}
.menu_text_span_top a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_right{
float:right;
}
.menu_text_span_right{
margin-right:20px;
float:right;
font-family: GeosansLight;
}
.menu_text_span_right a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
#left_container{
float: left;
width: 63%;
padding:5px;
margin-right:15px;
background-color:#069;
-moz-border-radius-topleft: 15px 15px;
-moz-border-radius-bottomright: 15px 15px;
border-top-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
}
#right_container{
float:left;
width: 31%;
padding:5px;
background-color:#069;
-moz-border-radius-topleft: 15px 15px;
-moz-border-radius-bottomright: 15px 15px;
border-top-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
}
.column_left_tmpl{
background-color:#FFF;
padding:10px;
-moz-border-radius-topleft: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
border-top-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
font-family: GeosansLight, sans-serif;
font-size: 16px;
}
.column_right_tmpl{
background-color:#FFF;
padding:8px;
-moz-border-radius-topleft: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
border-top-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
font-family: GeosansLight, sans-serif;
font-size: 16px;#59C169
}
.title {
width:100% auto;
padding-top:5px;
margin-bottom:5px;
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
border-top-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
font-family: Arial, Gadget, sans-serif;
font-size:22px;
color:#333;
font-weight: bold;
}
.spacer{
height:5px;
}
#header_container{
background-color:#333;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
-khtml-opacity:.9;
-moz-opacity:.9;
-ms-filter:"alpha(opacity=90)";
filter:alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
opacity:.9;
}
#footer{
width:70%;
height:80px;
float:none;
clear:both;
margin:0 auto;
}
.footer_inline{
width:100%;
margin-top:20px;
margin-right:20px;
float:left;
font-family: GeosansLight, sans-serif;
}
.footer_inline a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
</style>
So at which point did I go wrong, and how can I fix it? Thanks in advance for all your help!
This is a separate file? And you are linking to this style sheet from within your HTML with something like:
<link rel="stylesheet" type="text/css" href="path/to/my/css/file/style.css">
If so take out the first line:
<style type="text/css">
and the last line:
</style>
You dont need those in a separate style sheet.