CSS Background color hijacked

[jakeslife]

I have a site that is php, but uses an include tag to display my web log on my front page. A few redesigns ago, when I first started using pMachine, I found that you can't use the include command when the page you're including uses it's own css page, so I merged them into one. It has worked fine for a long time now, but now it seems to be acting up.

As the page is loading, but before the include tag is finished doing it's diddy, the background is the color it should be, but as soon as the blog is loaded, the entire background turns white. I have messed with some of the css for the web log, but it still seems to be having issues. I need the entire site background to be 004D95, not just the web log background, and the 669ACC is where it should be. Any suggestions?

The concept design I'm using is at www.jakeslife.net/template.php, and the css is below:

/* CSS Document */


table {

background-color: #669ACC;

font-size: 9px;

font-family: verdana,trebuchet,sans-serif;

color: #FFFFFF;

}




body {

background-color: #004D95;

margin-left: 10px;

margin-right: 10px;

margin-top: 10px;

font-size: 9px;

font-family: verdana,trebuchet,sans-serif;

}



a:link {

color: #C1D2E2;

font-size: 9px;

font-weight: bold;

text-decoration: none;

}



a:visited {

color: #C1D2E2;

font-size: 9px;

font-weight: bold;

text-decoration: none;

}



a:active {

color: #FF9900;

font-size: 9px;

font-weight: bold;

text-decoration: underline;

}



a:hover {

color: #FF9900;

font-size: 9px;

font-weight: bold;

text-decoration: underline;

}



/*--- LEFT SIDE BAR ---*/

#menu {

width: 0px;

float: left;

font: 9px/9px verdana,trebuchet,sans-serif;

padding-right: 0px;

text-align: right;

color: #333;

padding-bottom: 30px;

border-right: 1px dotted #999;

}





/*--- MAIN PAGE CONTENT ---*/

#content {

width: 420px;

float: left;

text-align: left;

margin-left: 0px;

margin-bottom: 60px;

padding-bottom: 30px;

padding-left: 0px;

voice-family: "\"}\"";

voice-family: inherit;

width: 500px;

}

body>#content {

width: 420px;

}





/*--- "member" links: login, register, calendar, etc. ---*/



.loginLinks, .loginLinks a {

color: #000000;

font-family: verdana,trebuchet,sans-serif;

font-size: 9px;

}

.loginLinks a:link { color: #003399; font-weight: bold;}

.loginLinks a:visited { color: #003399; font-weight: bold;}

.loginLinks a:active { color: #999999; font-weight: bold;}

.loginLinks a:hover { color: #cccccc; font-weight: bold;}





/*--- Dotted line between menu items in sidebar ---*/



.menuSpacer {

border-bottom: 1px dotted #999;

margin-bottom: 15px;

}





/*--- Used in Trackback and Pingback page. ---*/



H2 {

font-family: verdana,trebuchet,sans-serif;

font-size: 10px;

color: #FFFFFF;

font-weight: bold;

}



/*--- Used in Weblog templates to format the title of entries ---*/



H3 {

font-family: verdana,trebuchet,sans-serif;

font-size: 11px;

color: #FFFFFF;

font-weight: bold;

}



/*--- Used in weblog.php in the left side-bar, and archives.php page to format the date header ---*/



H4 {

font-family: verdana,trebuchet,sans-serif;

font-size: 11px;

color: #FFFFFF;

margin-top: 2px;

margin-bottom: 5px;

font-weight: bold;

}



/*--- Used in comment templates to format text used in the comment form. ---*/



H5 {

font-family: verdana,trebuchet,sans-serif;

font-size: 11px;

color: #FFFFFF;

margin-top: 2px;

margin-bottom: 2px;

font-weight: normal;

}







/*--- Weblog entry formatting. ---*/



.weblog {

padding-bottom: 12px;
border-bottom:1px solid #FFFFFF;
padding:5px;

}



/*--- Name of author in weblog entries ---*/



.author {

font-family: verdana,trebuchet,sans-serif;

font-size: 10px;

color: #FFFFFF;

font-weight: bold;

}



/*--- Paragraph formatting in weblog entries ---*/



p {

font-family: verdana,trebuchet,sans-serif;

font-size: 9px;

color: #FFFFFF;

margin-top: 2px;

margin-bottom: 2px;

font-weight: normal;

text-align: left;

background-color: #004D95;

}







/*-- Default form field formatting. --*/



form {

margin-top: 0px;

}



/*-- Input field formatting. --*/



.input {

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

background-color: #fff;

font-family: Verdana, Geneva, Trebuchet MS, Arial, Sans-serif;

font-size: 9px;

height: 1.6em;

padding: .3em 0 0 2px;

margin-top: 3px;

margin-bottom: 3px;

}



/*-- Input text-area formatting --*/



.textarea {

border-top: 1px solid #999999;

border-left: 1px solid #999999;

background-color: #fff;

font-family: Verdana, Geneva, Trebuchet MS, Arial, Sans-serif;

font-size: 9px;

margin-top: 3px;

margin-bottom: 3px;

}



/*-- Submit button formatting. --*/



.button {

background-color: #fff;

font-family: Verdana, Geneva, Trebuchet MS, Arial, Sans-serif;

font-size: 9px;

font-weight: normal;

text-transform: uppercase;

color: #000;

}



/*-- Pull-down menus. --*/



.pulldown {

background-color: #fff;

font-family: Verdana, Geneva, Trebuchet MS, Arial, Sans-serif;

font-size: 9px;

font-weight: normal;

text-transform: uppercase;

color: #000;

}











/* THE FOLLOWING CSS IS USED WITH THE MINI-CALENDAR */





/* Calendar header text */

.header {

font-family: verdana,trebuchet,sans-serif;

font-size: 10px;

color: #333333;

font-weight: bold;

}



/* Navigational links in the header of mini-calendar */

.navlinks, .navlinks a:link, .navlinks a:active, .navlinks a:visited, .navlinks a:hover{

color: #FFFFFF;

font-family: verdana,trebuchet,sans-serif;

font-size: 10px;

font-weight: bold;

}

.navlinks a:link { color: #FFFFFF; text-decoration: none;}

.navlinks a:visited { color: #FFFFFF; text-decoration: none;}

.navlinks a:active { color: #333333; text-decoration: none;}

.navlinks a:hover { color: #000000; text-decoration: underline;}





/* Days of the week text */

.weekdays {

font-family: verdana,trebuchet,sans-serif;

font-size: 9px;

color: #666666;

font-weight: bold;

}



/* Days of the month text and links */

.monthdays, .monthdays a:link, .monthdays a:active, .monthdays a:visited, .monthdays a:hover {

font-family: verdana,trebuchet,sans-serif;

font-size: 9px;

color: #666666;

}

.monthdays a:link { color: #0000b0; text-decoration: underline;font-weight: bold;}

.monthdays a:visited { color: #0000b0; text-decoration: underline;font-weight: bold;}

.monthdays a:active { color: #333333; text-decoration: underline;font-weight: bold;}

.monthdays a:hover { color: #cccccc; text-decoration: none;font-weight: bold;}

[Paul O'B]

Hi,

That page is a bit of a mess

You have defined the background colour for the body in three different places.

body { 
background-color: #004D95; 
margin-left: 10px; 
margin-right: 10px; 
margin-top: 10px; 
font-size: 9px; 
font-family: verdana,trebuchet,sans-serif; 
}
body{
background : f1f1f1;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9 px;
scrollbar-3dlight-color : #;
scrollbar-arrow-color : #;
scrollbar-base-color : #;
scrollbar-darkshadow-color : #;
scrollbar-face-color : #;
scrollbar-highlight-color : #;
scrollbar-shadow-color : #;
scrollbar-track-color : #;
}
body { 
background-color: #ffffff; 
margin-left: 20px; 
margin-right: 20px; 
margin-top: 10px; 
font-size: 9px; 
font-family: verdana,trebuchet,sans-serif; 
}

The last style is winning out because you have inserted the link to it here in the middle of your body html!!

</tr>
</table></td>
<td width="608" valign="top" bgcolor="#004D95"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> 
<title>Weblog</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<!-- CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="http://www.jakeslife.net/blog/weblog.css" /> </head> <body> 
<!-- Main content on right side of page -->
<div id="content"> 
<!-- Weblog entries -->

You can't include files like that. You have to include just the content not the doctype meta tags and links to stylesheets. Fixing this and the different decarations for the body should sort the problem.

You also have extra closing body and html tags at the bottom of the page which wont help.

If you added a doctype to your page (in the correct place) then validating your code would highlight these errors straight away and save a you a lot of searching.

Paul

[jakeslife]

Thanks! I realized that since I had a link to the stylesheet int he main page, along with one that pMachine was automatically putting into the include that it was wiggin' out. Thanks for your help!