CSS in Firefox and Ie Is Rendering Old CSS File...Chrome Shows New CSS Just Fine

css in firefox and ie is rendering old css file...chrome shows new css just fine

I tried CTRL+F5, Clearing the cache, rebooting...none of that worked right. Then I decided to change the ordering inside the css.php file for the readfile() functions. Once I moved the ordering around it triggered the new css to load. I don't know exactly why this worked, but now the new css loaded.

Decided to answer this here in case someone else comes accross a similar problem and the traditional cache clearing doesn't fix it.

When I upload new web files to my hosting, my browser is returning the old CSS file

on maciOS using chrome I found pressing SHIFT + REFRESH hard refreshes the page and forces re-downloading of all source files and images.

CSS file not refreshing in browser

Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.

If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.

<link rel="stylesheet" type="text/css" href="styles.css?version=51">

CSS not working in Chrome

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.

CSS style file doesn't link with main page

Assuming your paths are correct, this might just be a case of aggressive browser cacheing. I found this happens a lot in a few PHP frameworks.

Fix? Run your site incognito and see if the changes took effect.

Also depending on the framework you're using, there are different commands to clear server cache. Symfony for example you can run php bin/console cache:clear. Laravel, you can run php artisan optimize, Pimcore you can delete cache using symfony method but also using the admin panel under the settings gear, etc...

I do agree with dmanexe's answer though, you are using the path incorrectly for the background-image property in the css.

Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?

It appears that the text starts to be cut off when at least one CSS property that promotes the element to RenderLayer is applied (e.g. transform or opacity). So it seems to be the internal problem of the renderer that can't be fixed easily at CSS level. I'd recommend just to add some left padding (and right padding, if necessary) to make all letters fit inside the element boundaries, and compensate these paddings by transform or negative margins.

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

---

Related Topics