CSS file not being found

Discussion in 'Programming & Software Development' started by mixsetup, May 14, 2018.

  1. mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    SOLVED
    Thank you

    Hi there have a Bootstrap 4,HTML5 file and even though my CSS file is in the same folder it doesn't seem to be finding it.
    Code:
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Coast FM</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    Have tried <link href="style.css" rel="stylesheet" type="text/css"/>
    and also
    <link href="style.css" rel="stylesheet">

    Any idea's
    Thanks
     
    Last edited: May 15, 2018
  2. waltermitty

    waltermitty Member

    Joined:
    Feb 19, 2016
    Messages:
    698
    Location:
    BRISBANE
    What do you mean not finding it? Your styles aren't being applied or you're getting a 404 in the chrome develop tools network tab? Can you go to the file in your browser?
     
  3. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    styles aren't being applied.
    If I go to my css file and edit it to change color or font-size nothing happens.
    yes I can open it in my browser.
     
  4. mr camouflage

    mr camouflage Member

    Joined:
    May 25, 2012
    Messages:
    617
    Location:
    WA
    You need a forward slash infront of style.css to make it relative.

    Code:
    <link href="/style.css" rel="stylesheet" type="text/css"/>
     
  5. mr camouflage

    mr camouflage Member

    Joined:
    May 25, 2012
    Messages:
    617
    Location:
    WA
    Wait, are you running this from a web server or just loading it in a browser (like from a folder on your desktop)?
     
  6. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    Still not working with /

    Running it local just in a browser. I use notepad++ and just run it in chrome. Tried other browsers all the same.
     
  7. mr camouflage

    mr camouflage Member

    Joined:
    May 25, 2012
    Messages:
    617
    Location:
    WA
    It might be your browser caching the css file. Try doing a force refresh.
     
  8. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    thanks tried that before on all browsers.
     
  9. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    tried it on another computer and still doesn't work.
     
  10. gav1ski

    gav1ski Member

    Joined:
    Aug 9, 2001
    Messages:
    80
    Location:
    Sydney
    What about the browser debug tools (F12 on most)? Check the network tab when you refresh to check for 404's. Otherwise use the inspector to trace where the elements style is actually coming from. I also notice you are using https on most of your external links, try changing to http as combining secure and not secure may be causing you issues.
     
  11. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    No 404 errors under network
    changed https all to http

    Just found an error
    Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/style.css
    Made a totally new folder
    from notepad++ I opened the folder locations copied index and style.css to it.Still didn't work.

    Never had trouble like this before.
     
    Last edited: May 14, 2018
  12. gav1ski

    gav1ski Member

    Joined:
    Aug 9, 2001
    Messages:
    80
    Location:
    Sydney
    Ahh, the problem building a web site without some kind of web server. Things to try...
    1. try ./style.css this normally should ref to current folder
    2. you may have to do the full file:///PATH TO MY FILE/style.css then swap it back when going to a web server.

    If you are doing this on windows grab the free version of MS Visual Studio, it will give you a light web server to use for testing. If you are on something else have a look for something similar (full IDE) as while notepad++ is good it's not a web development tool really and having a proper one will save you heaps of grief.
     
  13. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    Think I will try from the start in the morning.

    Thanks for your help.
     
  14. stebie

    stebie Member

    Joined:
    Oct 21, 2003
    Messages:
    235
    Location:
    Western Subs, VIC
    I would've thought the example in the OP would be sufficient, even if accessed outside a web server (and assuming the style.css file does exist in the same directory as the web page as stated by the OP).

    Perhaps it's not an issue with the reference to style.css but with the content of style.css, or its content not being accessed correctly, or is being overridden.
     
  15. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,697
    Location:
    Wynyard Tasmania
    Okay must be something in the css as I deleted all of the CSS and put a few lines
    Code:
    * {
        margin: 0;
        border: 0;
        padding: 0;
    }
    
    body {
        font-family: sans-serif;
        margin: 40px;
        background: #F1F6F8;
    }
    Checked as I changed the value of the margin and it worked.
    So now I will just type it all out again one section at a time to make sure it keeps working.

    Thanks all.
     

Share This Page