So I was working on a page for the last week, every time when I end my job I save my files and close VSCode. Today I came back, opened everything and started writing. After a while I noticed that my rules in CSS did not came up in the page. I thought I did something wrong, so I tried different methods but nothing worked. Then I just opened the CSS in browser with F12 to check if something is off and I saw that it had the last weeks saved CSS. I closed everything, tried again, but nothing. The file is saved in local, I can see when it was changed, but browser still gets to see the last week's save. The link in HTML is right, never changed, the files are in correct folders, all is good. I'm working with WordPress and Twig atm, if this can help somehow.
<link rel="stylesheet" href="{{site.theme.link}}/style.css" type="text/css" media="screen" />
That's the link I used til now, it worked perfectly, paths never changed.
I'm sorry that I can't provide anything more but I can't really know what to show, like I changed nothing and it just stop working.
Thank you in advance for the time you'll take to help!
I suggest you to reinstall Mozilla Firefox. Follow these steps:
Backup your bookmarks (if you have any).
Take a screenshot of Add-ons page. It will help you to find and reinstall them.
Uninstall Firefox.
After uninstalling Firefox remove these folders:
C:\Users\[your-user-name]\AppData\Local\Mozilla
C:\Users\[your-user-name]\AppData\LocalLow\Mozilla and
C:\Users\[your-user-name]\AppData\Roaming\Mozilla.
If you have installed add-ons before uninstalling try this option:
Menu -> Help -> Restart with Add-ons Disabled
Could it be a caching issue?
Try opening dev tools and then right clicking the refresh button.
It will give you an option to clear cache and hard refresh.
(Assuming your using chrome)
If that's the issue and you don't want to deal with it again, then you could consider appending a cachebuster to your css url.
The easiest way to do that would be something like
{{site.theme.link}}/styles.css?r={{ random(1, 1000) }}
Keep in mind that in production, that's going to slow down delivery though (just a little bit, css files usually aren't that large) because it's going to invalidate the browser cache each time the site loads.
Related
I have been building a website for over a month now, nearly completed. All of a sudden, when I make a change to my style.css file, the change does not appear when I refresh the page in the browser.
The strange thing is that, if I make a copy of the file, called style_copy.css, and link to that and make changes, then the changes do appear in the browser.
Does anyone have a clue as to why this is occurring?
I am browsing on Google Chrome (94.0.4606.61) and editing in Visual Studio Code (1.61.0)
Thanks
First, make sure the css file has been saved.
If the file is already saved, then the issue is most likely because your browser has cached (saved an old version of) the file.
Then, try restarting the browser to clear the cache.
Also, try waiting and reloading, the file will likely update by itself pretty soon.
Instead of restarting the browser, you could also hit CTRL + F5
When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).
For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!
All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.
Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.
I am using Microsoft Webmatrix to do my coding.
I am using the Chrome Web browser.
I am using Hostgator hosting.
I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?
FIXED!
changed: https://example.com/app/source/css/main.css
to this: https://example.com/app/source/css/main.css?v=1
You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.
One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.
Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.
I'm working on a web page project, with an HTML file and a CSS file only. I use Sublime Text 3 for a better programming environment, I also use XAMPP to debug my code and test it on Chrome.
When I'm saving my programming files, the HTML one is saving, but CSS one is not saving; I checked it in the directory and opened it to view if my editions are saved or no, they are, but they don't show up in the debug using XAMPP and Chrome.
Why aren't my changes showing up in debug?
Try deleting the Chrome Browser's Cache. It might be creating that problem
It doesn't let me comment, but this is adding onto the users answer of clearing the browser cache.
Clear browser cache in chrome: https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
If the issue resolves after clearing your browsing cache, what I usually do when working with stylesheets is use the Chrome browser in incognito mode, it usually doesn't store cache in that mode, so after closing the tab and revisiting, it should show all of the changes.
fisrt try to clear/delete your browsers cache and if that didnt work try the steps below.
Lets say all your css code is in a file called style.css, what you need to do is:
you can just change the name of your file to something else for example style2.css (dont forget to also change the name in html file)
or
create a new file for example new-style.css.
copy and paste all the css code that you have from style.css to
new-style.css.
and lastly just delete style.css.
after that you can rename new-style.css back to style.css Or you can
keep it like that. doesnt really matter as long as you remember to
change the link name in html as well.
It might not be the best way to solve this problem but it works.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I've read the SO posts regarding this and can not find a solution.
I've tried changing the link in the HTML to another location. I've tried clearing all the browser data. But, it still pulls a previous favicon.ico.
Does anyone know where it is getting this old favicon.ico? I should be able to delete it manually at a minimum.
This site process does not work.
http://www.phpjunkyard.com/tutorials/force-favicon-refresh.php
Actually answer might be here:
How to clear IE's favicon cache?
This is wrong too...clearing the browsing history and cache..does nothing to the favicon.ico file
O.K...there was a check box you have to de-select to keep it from saving favorites...this was not intuitive b.c. you have to select all the rest.
From there I changed the file name and link to in the HTML.
Then I waited about a day
Then it changed....I.E has some sort of timer..can anyone quantify this delay for it to pick up changes?
I've recently noticed that Windows 7 does not update images, that is if I save and image over and exiting image...windows will still display the old image until I click on it. Probably related in some way to Microsoft's philosophy on updating images