CODEWITHSUNDEEP
phphtmlcss
yoshik karnawat
yoshik karnawat

Reputation: 83

CSS file in my browser keeps old even though I edited it

I can't understand why my css file is not working whenever I make some changes in it. The codes that I entered before are working properly but whenever I change the code it doesn't shows up.

    <?php 
session_start();
 ?>

<?php 

  include "dbt_connect.php";

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movies&amp;Stuff</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="FontAwesome/css/fontawesome-all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="index.css">

  <style>
    #footer{
        width: 100%;
        height: 100px;
        margin-bottom: 0px;
        background-color: gray;
        text-align: center;
        color: white;
    }
    #footer pre{
        padding-top: 50px;
        font-size: 16px;
    }
    #footer a{
        color: white;
        text-decoration: none;
    }
  </style>

  <script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5b0ae82b461c9500119099e0&product=sticky-share-buttons' async='async'></script>
</head>
<body>
    <header id="top_header" style="margin-top: 20px">
        <div class="clear">
        <h1 id="logo">Movies<span id="and">&amp;</span>Stuff</h1>
        <nav id="main_nav">
            <?php 
                if (isset($_SESSION['user_id'])) {
                    echo '
                    <a href="#" class="menu"><i class="fa fa-bars"></i></a>
                    <a href="Movies.php">Movies</a>
            <a href="TV Series.php">TV Series</a>
            <a href="AboutUs.php">About Us</a>
            <a href="ContactUs.php">Contact Us</a>

                    <form action="Includes/logout.inc.php" method="POST" style="float:right; margin-right:1em; border:none;">
                    <button type="submit" name="submit" style="background-color:black; border:none; color: #A5A5A5FF; font-size:17px;outline-style:none;">Logout</button>
                    </form>';
                }else{
                    echo '
                    <a href="#" class="menu"><i class="fa fa-bars"></i></a>
                    <a href="Movies.php">Movies</a>
            <a href="TV Series.php">TV Series</a>
            <a href="AboutUs.php">About Us</a>
            <a href="ContactUs.php">Contact Us</a>
            <span class="login" style="margin-right: -1em;"><a href="login.php">Login</a></span> | <span class="signup"><a href="signup.php">Signup</a></span>';
                }

             ?>

        </nav></div>

This is my php file code, I added a bar in the menu using font awesome and made it to display none in my css external file, but it just shows up. I can't understand why my css file is not working on my any other php files. I'm running it on localhost. I tried restarting it but nothing found.

    *{
    margin:0 auto;
}
body{
    font-family: sans-serif;
    background-color: black;
    color:#A8A8A8FF;
}
h1 h2 h3 h4 h5 h6{
    font-weight: 500;
}
.clear{
    clear: both;
}
#top_header{
    height: 150px;
}

.menu{
    display: none;
}
#logo{
    float:left;
    padding: 20px;
    text-transform: uppercase;
    color: white;
}
#and{
    font-weight: normal;
}
#main_nav{
    float: right;
    padding: 30px;


#main_nav a{
    color: #A5A5A5FF;
    margin-right: 1em;
    text-decoration: none;
}
.search{
    display: inline-flex;
    font-size: 20px;
    width: 97%;

}
.searchterm{
    width: 97%;
    font-size: inherit;
    border: 0.1em solid #6D6D6DFF;
    border-radius: 0.5em 0 0 0.5em;
    padding:0.2em 0.5em;
    margin-left: 20px;
    outline-style: none;
    transition: 1s all;
}
.search-btn{
    font-size: inherit;
    border: 0.1em solid #6D6D6DFF;
    border-radius: 0 0.5em 0.5em 0;
    cursor: pointer;
    outline-style: none;
    width: 100px;

}
.search-btn i{
    color: #6B6B6BFF;
}
.searchterm:focus{
    border:0.1em solid #C6C6C6FF;
}

This is my external css code, I've added display:none for the class menu under the top header but I'm still getting nothing. This problem occurred me last time when I was making footer but it didn't worked so I did it in the internal css. please help me sort out this thing.

Upvotes: 6

Views: 75253

Answers (11)

yubie
yubie

Reputation: 1

const raq = document.querySelector("#raquette");
const ball = document.querySelector("#ball");
const sc = document.querySelector("#score");
const go = document.querySelector("#gameover");
const ta = document.querySelector("#tryagain");


let score = 1;
let by = 0;
let rx = 0;




function bar_move (e){
   console.log(e) ;

   if(e.key == "ArrowRight"){
      rx+=10;
      raq.style.left = rx + "px";
      if(raq.style.left == "600px"){
         raq.style.left = "0px";
         rx = 0;
      }
   }
   else if(e.key == "ArrowLeft"){
      rx-=10;
      raq.style.left = rx + "px";
      if(raq.style.left == "-60px"){
         raq.style.left = "540px";
         rx = 540;
      }
   }
}
document.addEventListener('keydown',bar_move)




const randomLocalisation = () => {
   return Math.random()*550;
}
let bx = randomLocalisation();


function ball_move(e){
   by+=10
   ball.style.left = bx + "px"
   ball.style.top = by + "px"
   if(ball.style.top == "550px"){
      clearInterval(mball)
      ball.style.display = "none"
      raq.style.display = "none"
      sc.style.display = "none"
      go.style.display = "block"
      ta.style.display = "block"
   }
   else if(ball.style.top == "540px" && bx<(rx+60) && bx>(rx-60)){
      ball.style.top = 0 + "px"
      sc.textContent = score
      score +=1
      by = 0;
      bx = randomLocalisation();
   }

}
const mball = setInterval(ball_move, 100)


const trya = (e) =>  {
   go.style.display = "none"
   ta.style.display = "none"
   ball.style.display = "block"
   sc.style.display = "block"
   raq.style.display = "block"
   score = 0
   by = 0
   mball = setInterval(ball_move, 100)
}

ta.addEventListener('click', trya)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <form method="POST">
        username: <input type="text" name="username"><br>
        password: <input type="password" name="password"><br>
        <input type="Submit" name="Submit" value="Log in"> 
    </form>
    <?php
        require_once "users0.php" ;
        session_start() ;
        if(isset($_POST['Submit'])){
            $u = $_POST['username'] ;
            $pw = $_POST['password'] ;
            if($data[$u] == $u && $data[$u] == $pw){
                header('location:../index.php') ;
                exit();
            }
            else
                echo "invalid Password/Username !" ;
        }
        
    ?>
</body>
</html>

Upvotes: 0

bruh
bruh

Reputation: 1

using Ctrl + f5 will update the css easily

Upvotes: 0

Allison
Allison

Reputation: 11

The cache was definitely the issue with me. If you use Chrome as your browser, in Chrome developer tools settings, choose Disable Cache (While DevTools is open) under the Network section.

Upvotes: 0

SeeoX
SeeoX

Reputation: 604

The problem : My browser can't access my modified CSS file

The reason : My browser have cache this file (browser already have this file, he will not ask again for it).

Solution 1 - on development environment

Refresh the cache of your browser (on firefox and Chrome ctrl+maj+R). But you can't do that on production (you can't control the browsers of your clients)

Solution 2 - on production environment

Change the path of your file when you update them. The best way seems to add an argument like below

<link rel="stylesheet" href="index.css?v=1">

And change it on every production modification

<link rel="stylesheet" href="index.css?v=2">

You could use a variable instead making the changing easy for multiple files changes. But remember each time you modify the path of your CSS, all of your client will ask again for this resource. For example, don't use time() as value or it will cancel any caching of your website's clients (increase server charge).

It will apply the same on JS files and any other resource than can be cache by browser.

Upvotes: 4

Victor dedon
Victor dedon

Reputation: 194

its probably a cache issue, just delete all browsing data's, history, cache, cookies, e.t.c and then close the browser and open again, it should fix the problem as it fixed mine.

But the best way to actually fix this problem is by calling the css file with php. i recommend calling your css stylesheet with php because, if your website is online , you can't tell all your users to delete their browsing data every time you apply a change on the website

its very simple, first you write the style tag then call the css file with php.

<style>
  <?php include "style.css" ?>
</style>

Upvotes: 11

J3htro
J3htro

Reputation: 290

So I had this problem that my CSS code was working fine but when I deleted or added something it did not change on the site and I found a pretty easy solution for this that worked for me:

Just press: Ctrl + F5

This is called a "hard refresh" it worked for me on Windows, and with Chrome browser, if you use something else try this site: link

This is a little bit old question but I got the same problem now and I figured maybe I can help someone.

Upvotes: 20

TheMarci
TheMarci

Reputation: 31

For me solved this:
Before: <link rel="stylesheet" href="/css/style.css">
After: <link rel="stylesheet" href="css/style.css"> //Removed slash before css folder.

Upvotes: 3

ergohack
ergohack

Reputation: 1358

Similar to @Varinderjit Kaur's answer, I had placed my css files in a sibling directory with a relative path (e.g. ../css/styles.css). This directory was unreachable by the client browser and thus could not be displayed. Moving the css/ directory under the webroot (or html) directory instead of beside id made it resolvable by the client browser. Additionally, the link then used an absolute path instead of a relative path (e.g. <link rel="stylesheet" type="text/css" href="/css/styles.css">).

Upvotes: 0

Varinderjit Kaur
Varinderjit Kaur

Reputation: 41

I faced the same problem when I was making my first Php project. I used relative paths and changed the CSS file by making new file and linking that new file in index.php file. This Worked for me.

 <link href="./styles.css" rel="stylesheet">

Upvotes: 0

Dampen59
Dampen59

Reputation: 573

Cache issue.

Try changing

<link rel="stylesheet" href="index.css">

to

<link rel="stylesheet" href="index.css?v=<?php echo time(); ?>">

This will force the CSS to reload.

Upvotes: 28

Gumilar Prastio
Gumilar Prastio

Reputation: 15

I have faced the similar problem, my solution is change the name of your css file, for example your previous css file name is index.css, change it into newindex.css, and don't forget to edit the name of your css file in your html too. I hope it will work, It worked for me.

Upvotes: -1

Related Questions