Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
Like Tree6Likes

Thread: Background color not working with CSS

  1. #1
    Junior Member
    Join Date
    Apr 2015
    Posts
    3
    Member #
    49030

    Background color not working with CSS

    I've set up a master.css file including the following:

    body {
    *** margin: auto;
    *** padding: 0px;
    *** background-color: #424242;
    }

    This works fine in my HTML editor (PageBreeze) along with all the other fonts etc specified in the .css file, but when I upload the files to the Internet they default to a white background. The only way I can overcome this is to specify the background colour (dark grey) in the body of each individual file. All the other fonts etc work fine as specified in the .css file.

    Any ideas what I'm doing wrong? Please use minimal jargon in any replies as I'm only a beginner.

    Thanks, Paul

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    To answer you we would need to see more code. Best bet is to include your site url so we can see it first hand. Other than that all i can assume is that the file location has changed from your machine to your host and your css isnt linking to your html.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Take the stars out if your editor put them there. If not, Vapr_Arts is right.
    aspectsofwales likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Member
    Join Date
    Mar 2015
    Posts
    51
    Member #
    47779
    Liked
    3 times
    Why are using star in front of that each css attribute, are you trying to apply any hacks to browsers? If not just remove it. It will work fine. Or you just look for code with background-color which is given Important ahead of white color.
    aspectsofwales likes this.

  6. #5
    Junior Member
    Join Date
    Apr 2015
    Posts
    3
    Member #
    49030
    The following is the url for a copy of my home page, which displays the problem.

    Aspects of Wales

    Note that the background is white, but the css file specifies a dark grey background. Everything else in the css file seems to be working, so the file must be linking to the html for everything else. Ignore the stars in my original post as they aren't in the css file - they only appeared when I posted on the forum.

    The css file is at:

    http://www.aspectsofwales.co.uk/master_test.css

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Usually that doesn't happen when you post CSS. In this case, the stars are telling you something. Instead of spaces, you have some strange characters there. I don't know what they are, but they reveal themselves when you put your CSS in this validator:

    Best Online W3 CSS Validator

    Code:
    body {
    ��� margin: auto;
    ��� padding: 0px;
    ��� background-color: #424242;
    }
    p {
    font-family: "Arial";
    font-size: 16px;
    color: #CCCCCC;
    }
    h1 {
    font-family: Arial;
    font-size: 40px;
    font-weight: bold;
    color: #CCCCCC;
    }
    h2 {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    color: #CCCCCC;
    }
    h3 {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    color: #CCCCCC;
    }
    h4 {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    color: #CCCCCC;
    }
    h5 {
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;
    color: #CCCCCC;
    }
    a:link {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    text-decoration: underline;
    color: #CCCCCC;
    }
    a:visited {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    text-decoration: underline;
    color: #CCCCCC;
    }
    a:hover {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    color: #800000;
    background: #ffffcc;
    }
    a:active {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    color: #800000;
    background: #ffffcc;
    }
    li {
    list-style-position: outside;
    list-style-image: url(images/bullet.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    What you'll want to do is either take those characters out or replace them with actual spaces. If you want to know what they are, I'm probably the most likely person to have an answer on here...and you've got me stumped.
    Vapr_Arts and aspectsofwales like this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Yea if thats not the problem im stumped, did you copy/paste this from off the web somewhere? It may have been there that these special characters came about. Do like theGame says and remove them adding actual spaces and you should be fine.

    Manually entering the code rather than copy/paste SHOULD fix this.. If not im at a loss as well.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    aspectsofwales likes this.

  9. #8
    Junior Member
    Join Date
    Apr 2015
    Posts
    3
    Member #
    49030
    Brilliant! I've no idea where those characters came from, but I've deleted them and it works fine now. Thanks to everyone who helped to solve this problem.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    My best guess is your editor. WYSIWYG editors are known to create bloated code, although I've never seen anything quite like this before.
    aspectsofwales likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Member
    Join Date
    Mar 2015
    Posts
    51
    Member #
    47779
    Liked
    3 times
    Quote Originally Posted by aspectsofwales View Post
    The following is the url for a copy of my home page, which displays the problem.

    Aspects of Wales

    Note that the background is white, but the css file specifies a dark grey background. Everything else in the css file seems to be working, so the file must be linking to the html for everything else. Ignore the stars in my original post as they aren't in the css file - they only appeared when I posted on the forum.

    The css file is at:

    http://www.aspectsofwales.co.uk/master_test.css
    If you want background should be in white, then you have to change the background of header and main content div. They are grey color.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com