Grow your CSS skills. Land your dream job.

[Solved] CSS Stylesheet NOT applying to website

  • # July 27, 2009 at 3:42 pm

    Hie
    I have been working on a website most of today and I was just doing a few finishing touches and uploaded the site but now it has no css applied to it at all and I was used firebug to check for the problem but it is telling me there isn’t css applied to the site.

    I have validated my css and there are no errors. I have also validated the html and most of the pages have no errors. I am lost for words and I have no idea what steps to take.

    You can have a look here
    http://creativeastro.com/MSHeating/index.php/

    Here is my css below

    Code:
    body{width:100%;
    font-family:Verdana, Geneva, sans-serif;
    color:#091840;}

    /*div with all the content*/
    .wrapper{width:100%;
    margin:0px auto;}

    /******************HEADER**********************/
    #header-container{width:100%;
    height:100px;
    }
    #main-pic{width:100%;
    }

    #pic{
    width:960px;margin:0 auto;
    }
    #header{
    width:960px;
    margin:0px auto;
    height:100px;}

    .logo{float:left;
    margin-left:13px;
    margin-bottom:6px;}

    img{border-style:none;
    }

    .contact{float:left;
    margin-top:15px;
    margin-left:13px;}

    .lady{
    margin:10px 4px 20px 13px;
    }
    .boiler{margin:10px 13px 20px 4px;}

    /****************END***************************/
    .content{margin:0px auto;
    width:960px;
    padding-bottom:20px;}

    .contact-form{margin:0px auto;
    width:960px;
    padding-bottom:20px;}

    /*************the green boxes under the main image and the get a quote image*************/

    #green-boxes{width:960px;
    margin:0 auto;}
    #green1{background-image:url(images/green1.jpg);
    background-repeat:repeat-x;
    float:left;
    margin-left:13px;
    width:234px;
    height:245px;}

    #green2{background-image:url(images/green2.jpg);
    background-repeat:repeat-x;
    float:left;
    width:243px;height:245px;}

    #green3{background-image:url(images/green3.jpg);
    background-repeat:repeat-x;width:229px;height:245px;
    float:left;
    margin-right:10px;}

    #quote{width:220px; height:245px;
    float:right;
    margin-right:10px;}

    .more{margin:90px 35px 10px 35px;}

    /****************ICONS INSIDE THE GREEN BOXES************************/
    .services{margin:15px 10px 15px 15px;}
    .repairs{margin:15px 10px 15px 10px;}
    .customer{margin:15px 10px 15px 10px;}
    /*************************END****************************************/

    /**************FONT FORMATTING********************/
    p{font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    margin:0px 30px;
    color:#091840;}

    h1{font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    margin:10px 30px 15px 30px;
    font-weight:bold;
    color:#091840;
    }
    h2{font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    margin:10px 30px 10px 30px;
    font-weight:bold;
    color:#091840;
    }
    h3{font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    margin:10px 30px 10px 30px;
    font-weight:bold;
    color:#091840;
    }
    h4{font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    margin:10px 30px 10px 30px;
    font-weight:bold;
    color:#091840;
    }
    ul.greenlist{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    list-style:url(../images/tick.png);

    color:#091840;}

    /**********************The Images on the Power Flushing Tab : SERVICES PAGE*****************/
    #powerflush-img{margin-left:auto;
    margin-right:auto;
    width:700px;}
    /**********************END******************************/

    /*****************FOOTER***************************/
    #footer{background-color:#091840;
    height:150px;
    width:100%;
    clear:both;
    }
    #inner-footer{width:960px;
    height:150px;
    margin:0 auto;}

    .footer-links{
    width:150px;
    height:160px;
    float:left;
    margin-right:20px;
    }
    #footer-imgs{
    width:330px;
    float:right;

    }

    .img1{margin-top:40px;
    margin-left:10px;}
    .footer-contact{float:left;
    margin-top:40px;
    margin-left:13px;}

    ul.list1{font-family:Verdana, Geneva, sans-serif;
    color:#fff;
    color:#6a6d69;
    font-size:11px;
    list-style-type:none;}
    ul.list2{font-family:Verdana, Geneva, sans-serif;
    color:#6a6d69;
    font-size:11px;
    list-style-type:none;}

    If you require anymore information I will gladly give you. I also have spry tabs and accordions on the site.

    Looking forward to your reply

    # July 27, 2009 at 3:52 pm

    Whoah whoah whoah. YOu have some crazy things occuring in your HTML.

    You have THREE different <title>’s. You link to the CSS more than once. You have two <head>’s, you show the DOCTYPE twice…

    And going through it some more… you do it again at the bottom of the page!

    The HTML is NOT valid and is the reason why you’re not getting your CSS styled.

    This is obviously the first website you’ve ever done, so it’ll be a little difficult to try to explain to you what’s wrong.

    The following SHOULD be right, but it’s impossible to tell without fully going through and debuggin it:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






    MS HeatingBosch Credited Installer
    Our Services

    • Boiler Replacements
    • Under Floor Heating
    • Power Flushing
    • Central Heating Installations
    • Boiler Servicing
    Maintenance and Repairs

    Boiler Maintenance is very important etc etc.

    Learn More

    get a quote

    Find out what our clients say about our work.

    Read Feed Back


    [/code][code]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






    MS HeatingBosch Credited Installer
    Our Services

    • Boiler Replacements
    • Under Floor Heating
    • Power Flushing
    • Central Heating Installations
    • Boiler Servicing
    Maintenance and Repairs

    Boiler Maintenance is very important etc etc.

    Learn More

    get a quote

    Find out what our clients say about our work.

    Read Feed Back


    [/code]

    # July 27, 2009 at 4:18 pm

    Hie

    Thanks that is very strange.

    The site was working fine just about 2 minutes ago, now it isn’t so there definitely must be something wrong

    I had a look at the files I have on my computer and the code is nothing like what it is looking like when I view the source. I have copied the css and validated it again and it is still validating.

    This is not the first site I have designed and I have not come across a problem like that before.

    Any help much appreciated

    # July 27, 2009 at 6:07 pm

    Hmmmm. Are you using anything to generate the code? How are you working on it? What program are you using? Perhaps something is going wrong in the upload?

    Are you using includes?

    Where are you validating from? When I validate the live site it comes up with multiple errors. Also, I’d recommend changing your DOCTYPE to Strict. It’ll help you track down errors quicker.

    # July 28, 2009 at 2:13 am

    I am using dreamweaver CS4 code view only.
    I have php include for the header and footer.
    I am using validator.w3.org html and css validator.
    I am using filezilla to upload to the server.

    Actually now I think the different doctype declarations maybe coming from the includes because I created a new html ,saved it as a .php and did not remove the declaration on them before uploading. Do you think this could be the problem? I have used the php include that way on one of my projects but did not get any problems. I will have a look right now. Even though I used the include previously It is all new to me. Do I have to remove the doc type declaration from the header.php for example before putting it in index.php as an include?

    thanks

    # July 28, 2009 at 2:36 am

    Yes.

    The ONLY thing that should be in the include file is the EXACT characters that you want to be included. Nothing more, nothing less.

    # July 28, 2009 at 2:58 am

    Okay thank you so much for your help.
    My footer include now looks like this minus the doctype declaration and css reference is this correct




    and the header include






    [/code][code]


    and the header include






    [/code]

    # July 28, 2009 at 3:16 am

    It seems to be working now but I am not getting too excited incase things go wrong again. I will wait to hear what you say about the code I pasted above.
    I just need to sort out my main page which is not looking like it should. Three of the images on the index.php just under the main image are not appearing.

    # July 28, 2009 at 11:41 am

    Remove the following from your footer:

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    </head>

    <body>

    # July 29, 2009 at 10:17 am

    Okay thank you very much.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".