SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member jakeslife's Avatar
    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."

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 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; 
    }
    The last style is winning out because you have inserted the link to it here in the middle of your body html!!

    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 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

  3. #3
    SitePoint Member jakeslife's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •