SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: CSS Background color hijacked
-
Oct 17, 2004, 02:07 #1
- Join Date
- May 2004
- Location
- Seattle, WA
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS Background color hijacked
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;}Jake
Jake's Life |.net
"One must forgoe the self to attain total spiritual
creaminess, and to avoid the chewy chunks of degredation."
-
Oct 17, 2004, 08:40 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
That page is a bit of a mess
You have defined the background colour for the body in three different places.
Code: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; }
Code:</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 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
-
Oct 17, 2004, 20:05 #3
- Join Date
- May 2004
- Location
- Seattle, WA
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
Jake
Jake's Life |.net
"One must forgoe the self to attain total spiritual
creaminess, and to avoid the chewy chunks of degredation."
Bookmarks