I have index.html and guide.html, I link to the guide.html in the index page. however when i go to the guide one through the link the page won't have the design until I refresh. What am I doint wrong? Each page has its own css.
Here's an image right after I click:
And here's another one right after I refresh:
Could be cached css/html. If it looks right after pressing ctrl+F5 on the page in question, it is working correctly.
Web browsers cache CSS files. I see you're using Chrome for Windows - CTRL + F5 will fully refresh the page, CSS and all.
If this problem appears on a live site for some reason, you could re-name your CSS file to avoid the browser using a cached version. For instance custom.css would become custom-2.css.
Related
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I got a problem with my css cache,I got a page which loads transcations of that particular user.I used jquery table sorter to sort the table which inplace creates a arrow icons on the end of .It works fine for most of the time but some times the arrows doesnt show up.i need to do a manual CSS clear cache ctrl+r or cntrl+F5 to get the icons back.Is there any alternative to clear the css cache on succesfull page load.so that we do not need to manually refresh the page to get the icons.It happens both on IE and mozilla.
I just started using this bookmarklet to refresh CSS while I was working on a page that responded wonky to page reloads. If you take that logic, you can call it on page load and it should update your style sheets.
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".
I am having an issue with IE (9 in this case) where I have uploaded a new CSS file for a page and it works just fine when I go to the page. The problem I am having is when I browse to any another page, if I then hit the back button it renders my page using a previous version of the CSS file. I verified this using the F12 tool to see that the css file only had the entries from the previous version. In this case, i was styling 'ol' and 'li' elements if that matters.
Is there anything I can do to make IE load the most current version of a css file when the browsers back button is used?
Again, the page loads perfectly if I browse to it in any "forward" manner, I also have my browser set to check for new versions every visit. Its when I hit the back button it has problems. Also every other browser ive tested has no problem using the back button.
you could add a parameter when calling the stylsheet...
?version=2
...after you .css extension
If you are clicking back to return to a page that you have previously visited with the old stylesheet, then yes, it will load the old stylesheet. A simple refresh should fix this.
The reason is that the back button is not meant to reload old pages, but to preserve the pages exact state and return the user back to that page.
If indeed you have loaded the new stylesheet on page A and then move forward to page B, then click back to go to page A and an old version of the style has been loaded, there might be something going seriously wrong with IE's cache. It might be a bug. Maybe changing the filename or adding something to the query string will force it to recognise your stylesheet as a newer version eg:
style.css?v2
will make sure the browser treats your style as a completely new file and disregard any old cached versions.