2

No matter what I change in my .css file, the page remains the same - what's more, neither changing the link tag so that it points to another .css file nor deleting it completely makes no difference. Other changes in html code are applied. The sourcecode of the webpage shows everything as it should be. This behavior started when I redirected the link tag from previous file to the one I use now (plus there have been some changes in the tag while this problem occured, to test the behavior of my webpage); changes in neither file affect the page.

For the first time when this happened, this was caused by copies of head tag in included chunks of code (for header, left menu etc. - their head part overrode the head part of the main page) and the problem was solved by removing these redundant heads from these files. But it happened again when I changed the link tag for the next time. I couldn't find any head parts in my included files, but the problem lasts (only solution I can see now is to delete the included files and copy the code directly to the file, but this would mean lots of redundant code).

How can I solve this problem, so that my page response to changes in .css files without increasing redundancy? How to ensure that I can change the link to .css file just on one place with no such problems?

Do I have to unload the CSS file somehow?

I saw this problem both in Firefox and in Chrome. I use PSPad to write the code, just in case it would play role.

EDIT: I have cleared browser cache now, and I changed the link to .css files from one to another before, but nothing helped. Now I accept the best answer saying the problem is in caching and I start a related question to find out how to solve the caching issue. If the other question's answers would say that in this case I can be sure that problem isn't in caching (very unlikely, but fail of ordinary methods of caching-problems-solving is unlikely too), I'd update this question and start searching for other possible problems, but now the message seems to be clear: when webpage ignores changes in .css files, caching is to blame.

EDIT2: This question is sort of a result of a mistake and the solution of my problems is somewhere else, but there are many questions related to this one as written here on stackoverflow, so I add a brief list for those who really have a problem with caching (this question was viewed enough times in the first day of its existence so that it might do worth it):

Stylesheet not updating

Firefox browser does not reload the update CSS/JS files

What is an elegant way to force browsers to reload cached CSS/JS files?

Making sure a web page is not cached, across all browsers

And, finally, one from super user:

Config xampp never to cache pages from localhost

Community
  • 1
  • 1
Pavel V.
  • 2,653
  • 10
  • 43
  • 74

5 Answers5

3

You css is getting cached. If you clear your cache, you will see a difference.

There are techniques you can apply to bust the cache, such as appending a timestamp or build number to your filename or link. If this is for development purposes and your production copy won't change much, I wouldn't bother, as clearing your browser's cache will suffice.

Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
1

First check that you making the changes in the right file(believe it happens all the time).

Second if you are playing with the right file check that your changes can be applied. for example use !important to force the browser to use that CSS style.

Third when you are dealing with JS or CSS Always be sure that you are not working with a cached copy (again it happens all the time)

kindly check this to force your browser to ignore the cache

Browser for Developers no cache

Community
  • 1
  • 1
ebram khalil
  • 8,252
  • 7
  • 42
  • 60
1

On your browser, try the keyboard combination CTRL-F5 to clear whatever cache you have on the site...

bastos.sergio
  • 6,684
  • 4
  • 26
  • 36
1

Solved, and it wasn't about caching! I thought .css files are to blame, but the mistake was between chair and keybord.

The body of my html/php code looked like this:

<body>

<?php
  include 'header.php';
  include 'left_menu.php';
  include 'footer.php';
?>

*main page code*

</body>

My footer and main page were all moved inside the left menu (I don't know what exactly caused this problem, but I know how to solve it now). I mistakenly blamed some error in .css file of this, so I asked this question. If I had e.g. changed the background color or made some other change clearly visible on the tiny space left for my main page, it would become clear that the .css file updates normally and problem is somewhere else.

I just changed the position of include tags and everything is OK:

<body>

*main page code*

<?php
  include 'header.php';
  include 'footer.php';
  include 'left_menu.php';
?>

</body>

Sorry for asking you for something else than I really wanted, and thanks for teaching me how to solve caching problems (I'm almost sure I'll face them some day in the future).

Pavel V.
  • 2,653
  • 10
  • 43
  • 74
  • 1
    so to sum up: http://thecodinglove.com/post/52946310348/when-you-realise-you-were-debugging-the-wrong-function – Pinoniq Jun 27 '13 at 09:16
0

There may be many tips but the important tip are:

  1. Check the file you are updating (CSS file).

  2. Upon updating in the file go to the localhost.

  3. Press CTRL+F5 for updating the cached file and the work is done.

EstevaoLuis
  • 2,422
  • 7
  • 33
  • 40
Nature
  • 11
  • 1