I'm trying to make a web application using asp.net 4.0 and VS 2012 and for some reason my style sheet declarations are stock to the first version of the site were they weren't inside a folder. now that they are inside a folder, the declarations are still rendering and pushing to the browser as:
<link href="global.css" rel="stylesheet" type="text/css" />
Whereas they should be (and are inside VS):
<link href="style/global.css" rel="stylesheet" type="text/css" />
I really don't know whats going on, am I doing something wrong? I have built, rebuilt, and clean the solution as well as pressing the refresh button (the button, f5, control f5 in IE9, Firefox, and chrome) fifty times.
I had a similar issue. It was a browser caching issue. In IE go to Tools | Internet Options | General Tab. Click on Browsing history "Settings". Set it to "Check for new version of stored pages" to "Every time I visit the page".
This may be due to caching in the browser. What I do when developing web sites is disable the browser cache. Then every time it will load the modified files.
In Google chrome you can use Incognito Window when testing your changes.
Just before I thought I would restart, I tried renaming the style sheet. This solved it for me. Appears to be some caching problem indeed.
Related
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
I have added only one(above) stylesheet in my page. I have buttons as menu and there CssClaas is set to mbt. If I remove CssClass="mbt" from a button tag, I will see that button totally with no style.
<asp:Button ID="mHome1" runat="server" Text="Home" CssClass="mbt"
PostBackUrl="~/Default.aspx"/>
But I have already removed mbt from Styles/Site.css. I have no mbt class in my whole project now, but still its effect is there. I have tried to rebuild project and restart visual-studio, but its effect is not going any way. How? Why?
Have you tried to clear your browser's cache? Maybe the stylesheet file is cached.
With most browsers, you can force a reload of all files by clicking Shift-F5 or Ctrl-F5.
In my experience, I had the most cache-related problems when using Google Chrome.
In Internet Explorer, there is a useful option (in Internet Options -> General tab -> Browsing History -> Settings) where you can tell the browser to check for newer versions of files every time a page is loaded. This setting can be especially useful while developping a web application.
In firefox, you can find the settings in the Options dialog, under Advanced -> Network.
Try deleting, then re-uploading the css.
clear the browser cache. Ctrl + Shift + Del
In both chrome and Firefox, the browser doesn't load the full stylesheet after a change is made. I have to refresh the browser twice. The styles are all in one stylesheet, so this makes no sense to me.
The main culprit is that ul elements set to display:none are over-ridden by the user agent styles of ul,menu display block. However, if I refresh again, then my entire stylesheet loads. All my files and folders are stored on the work server. Is it a caching problem?
To prevent caching of css files you can append a querystring. I do this when we update our main website.
<link rel="stylesheet" type="text/css" href="http://mysite.com/all.css?v=1.3">
I increment this whenever we do a release. If you are just testing your web server you can put in some dynamic code that generates the current time.
In Chrome, you can disable the cache when you're developing. Open the developer tools (F12, or Ctrl-Shift-J), click on the Gear at the very bottom right, and check "Disable cache".
When I make a page, link it to a CSS file, and open it in a browser, it works fine.
But if a make a change and refresh the page again between very short time periods, the change is not reflected. But after sometime, when i refresh the page again, the changes appear.
So, somehow the browser keeps the CSS file cached and expires it after sometime. How to make the browser cache no CSS or HTML file.
It would be better if i can block it on a particular domain.
I'm on Ubuntu, using Chrome and Firefox, trying to prevent browsers from caching CSS files on 'localhost'... How to do it...
Thanks...
Something as simple as this should work:
<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">
Just replace {CURRENT_TIMESTAMP} with the actual timestamp in your server side code. This makes the browser think it's a new file because of the query string and it will be downloaded again. You could also use the actual modification time of the file (filemtime('/path/to/css/screen.css') if you're using PHP) which should prevent unnecessary downloads.
You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.
It would help to know how the website is hosted, as you can configure this in most web servers.
Also, it's a good idea to introduce a cache busting mechanism which would modify the links to the CSS files in question when you change the CSS files' contents. Browsers would then reload the CSS file because the HTML refers to a different URL.
A good example of a cache busting mechanism is the ruby on rails 3.1 asset pipeline which also minifies files and gzips them if the browser supports them:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/
The seemingly-inelegant but rock solid approach is to give the asset a new name, when the content changes. This solves the problem for all your users, not just you:
<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">
Or maybe (but it's more of a pain to change in an IDE, and sometimes causes unrelated problems with caching):
<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">
Nothing else works quite as well in large scale production environments, where millions of copies of an older css file may be sitting in various intermediate or browser caches. Some clients ignore cache control headers, and you don't really want caching subverted anyway, at least not in production.
In development you can press Ctrl+Shift+J (Chrome) and turn off caching.
So here's an interesting conundrum.
I have a page, default.aspx. It has a LINK tag to a stylesheet, located in the CSS subfolder:
<link type="text/css" rel="Stylesheet" href="Css/Logon.css" media="all" />
The folder structure is as follows:
[Root]
[CSS]
[Images]
[Logon]
No big surprises. (Our default.aspx page is our logon page. Again, no big surprises.)
Here's the problem. If you launch the page in IIS, the page renders beautifully. CSS loads, fonts appear, everything is positioned appropriately, and lions are laying down with lambs.
If you view the page in WebDev, the stylesheet isn't loaded. Since it specifies all the images, fonts, and positioning, everything is black on white, in Times New Roman, slammed left against the window border. Dogs are chasing cats in circles and causing traffic accidents. Chaos ensues.
Why? How do I fix it? What information do I need to provide to reach a happy conclusion?
P.S. I am aware of the URL differences between running it in IIS and Webdev, but the differences don't seem to make much sense to me, due to one simple fact: the path to the style sheet is relative to the location of the default.aspx page. The stylesheet isn't being loaded at all. I can see this because there's no font styling at all.
My recommendation would be to use Firefox to load the page. With the Firebug add-on installed you can view the requests for the CSS files in the Net panel. This will allow you to at least see the path that is being used for the CSS file.
If you have not used the network monitoring feature in Firebug before you may want to go here:
http://getfirebug.com/network
We eventually discovered the cause of this problem using Fiddler: HTTP 401 (Unauthorized). A little more research uncovered that we needed to add explicit <location/> entries for the stylesheet, and all the images it referenced, to our web.config file.
When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
The fix is called "hard refresh"
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.
In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.
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">
A good way to force your CSS to reload is to:
<link href='styles.css?version=1' rel='stylesheet'></link>
And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.
I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.
I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.
CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!
Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff
This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.
Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.
To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
The Ctrl + F5 solusion didn't work for me in Chrome.
But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):
As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
Select "Empty Cache and Hard Refresh".
Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
While results in a URL like:
http://example.com/blah/main.css?version=1602937140
This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.
If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.
Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.
If you're using ASP.NET web forms, make sure that you are using the right theme:
I just spent about an hour trying to solve this!
Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.
Also the last CSS declaration takes precedence.
I faced the same problem. Renaming the file worked for me.
The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).
You can also empty the caches in most browsers with the following keyboard shortcuts.
Safari: Cmd+Alt+e
Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)