Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background-color: not displaying properly in IE

    Hello, i set my background color on my css like this...

    body {margin: 0; padding: 0; background-color: #ddd6c4 !important}

    It displays properly on safari (mac), but not properly on I.E. (PC).

    Can someone tell me how I might fix this problem?

    Thank you!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello paul1lisi,
    The bit of CSS you quoted there is valid and should work. Something else may be overriding it, in which case we'll need to have a link to the test site.

    Since your issue is with IE, the first thing I think is maybe you don't have a valid DocType Declaration. See the link about DocTypes in my signature below. It may help you to validate your code too, there are links down there for that also.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Excavator and thank you for your help. I am not a programmer but I am trying to do our website myself because we have no budget for it.

    the website is jayatwill.com

    and here is the css I post bellow. I appreciate this so much, everything else works fine except the background color on PC.
    thanks!



    body {margin: 0; padding: 0; background-color: #ddd6c4 !important}
    .container {background: url(images/home.jpg) no-repeat left center; width: 100%; height: 700px}
    .container2 {background: url(images/bio.jpg) no-repeat left center; width: 100%; height: 700px}
    .container3 {background: url(images/contact.jpg) no-repeat left center; width: 100%; height: 700px}
    .container4 {background: url(images/music.jpg) no-repeat left center; width: 100%; height: 700px}
    .container5 {background: url(images/news.jpg) no-repeat left center; width: 100%; height: 700px}

    #right {width: 75%; padding: 0 2.5% 0; float:right; clear:both}
    p {text-align:right }

    @font-face {
    font-family: 'courier_primebold';
    src: url('courier_prime_bold-webfont.eot');
    src: url('courier_prime_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('courier_prime_bold-webfont.woff') format('woff'),
    url('courier_prime_bold-webfont.ttf') format('truetype'),
    url('courier_prime_bold-webfont.svg#courier_primebold') format('svg');
    font-weight: normal;
    font-style: normal;

    }


    ul#navlist
    {
    margin-right:20px;
    padding-left: 0;
    white-space: nowrap;
    text-align:right;
    float:right;
    margin-top: 0px;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    font-family: "Arial";
    font-size: 28px;
    font-style: boldl;
    margin-right:20px;
    }

    #navlist a { padding: 3px 6px; }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    text-decoration: none;
    font-family: "Arial";
    font-size: 28px;
    font-weight: bold;
    }

    #navlist a:hover
    {
    color: #000;
    text-decoration: none;
    font-family: "Arial";
    font-size: 28px;
    font-weight: bold;
    }


    #socialmedia { position: relative; z-index: 2; width: 500px; padding-top: 20px; float:right; clear:both; padding-right: 5% }


    .text {
    font-family: "Arial";
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #000;
    padding-top: 220px;
    margin-right:20px;
    }


    .textnews {
    font-family: "Arial";
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #000;
    margin-right:20px;
    margin-left: 40%;
    }



    .fsSubmitButton
    {
    padding: 10px 15px 11px !important;
    font-size: 18px !important;
    background-color: #000;
    font-family: "Arial";
    font-weight: bold;
    color: #ffffff;
    margin-right:20px;
    padding-left: 0;
    white-space: nowrap;
    text-align:right;
    float:right;
    margin-top: 0px;
    }


    .input {
    width: 200px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }


    .textarea{
    width:400px;
    height:100px;
    border:1px solid #000000;
    background-color:#CCCCCC;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
    }

    .textbio {
    font-family: "Arial";
    font-size: 14px;
    font-style: normal;
    line-height: 250%;
    color: #000;
    padding-top: 20px;
    margin-right:20px;
    margin-left: 40%;
    margin-bottom: 20px;
    }

    h1, h2, h3 {font-family: "archistico_bold_macroman"; text-align: right}


    h1 {
    font-size: 140px;
    color: #fff;
    margin-top: 0px;
    margin-bottom: -10px;
    }

    h2{
    font-size: 32px;
    color: #000;
    margin-right:20px;
    margin-top: 0px;
    }

    h3{
    font-size: 32px;
    color: #000;
    margin-right:20px;
    margin-top: 50px;
    }



    @media screen and (max-width: 1280px) {
    body {background-size: 450px auto}
    }

    @media screen and (max-width: 1024px) {
    body {background-size: 350px auto}
    h1 {font-size: 90px}
    }

    @media screen and (max-width: 800px) {
    .container {height: 700px}
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Beats me. I'm seeing a #ddd6c4 background color on the body of that site in all browsers.

    When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.

    This will wrap your code in a scroll box which greatly helps the readability of your post.

    If you post a link to the site, there is no need to post any code. We have it all as soon as we goto your site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much! Next time I will post properly. Must be a problem with my computer and or browser version.


  •  

    Tags for this Thread

    Posting Permissions

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