You are here: Home / What do you need? / Help and documentation / HTML, JavaScript and client side stuff / Why does my web site look wrong?

Why does my web site look wrong?

by Darrell Kingsley last modified Mar 13, 2014 02:22 PM
Sometimes, perhaps after your web site has had some code changes applied to it, especially changes related to the layout, it just doesn't look right. Why is this, and what can you do about it?

Web browsers, such as Internet Explorer, Firefox, Safari and Chrome store parts of every web page they visit on your computer in what is called a "cache". This means that when you revisit that web page, you don't need to download every part of it from scratch, which speeds up the loading of the page a great deal. It's all very useful, and every web browser does it, but it can occasionally cause problems with the way pages are displayed.

Why does it cause problems?

In order for caching to work, your browser has to store the various files that make up a web page or web site on your computer. It then uses those files to rebuild the page. The web site will tell your browser when to check for updated versions of those files, which can be anything from "check in an hour from now" through to "never check". Some files which don't change very often, such as stylesheets and images, are usually marked as "check again in 24 hours". This means if you revisit the web site within 24 hours of your previous visit, your browser will reload the files from its cache without checking whether they are outdated.

If in the mean time your web design team has changed these files, you won't see the changes. Sometimes, if the structure of the page has also changed, these structural changes can come through, but the stylesheet changes that go along with them don't. It's important to note that this only applies to people revisiting the site within this short window of time, and that new visitors will see the site as it should be seen, as will returning visitors coming back after a few days.

It is possible to "re-label" these files on the server, but many browsers won't even check to see whether they have been re-labelled, so will continue to show you the old files. This means the pages might appear misaligned, showing old images, or broken in some other way, although you won't generally see an error message. In addition, browsers sometimes store corrupted version of files which they are reluctant to delete from their cache, which can cause similar issues.

Fortunately, there are steps you can take to remedy these problems and force your browser to start displaying the most up-to-date version of all the files on a web site.

1) Try a page refresh

Just click the reload or refresh button in the top bar of your browser, or the F5 key on your keyboard (in Internet Explorer or Chrome). This should reload the files from the server.

2) Try a forced refresh

If the above doesn't work, you need to force the browser to reload all files form the server as follows.

  1. Internet Explorer: Hold down the "ctrl" key and press the F5 key.
  2. Chrome (PC): Hold down the "ctrl" key and press the F5 key or hold the shift key and press F5.
  3. Chrome (Mac): Hold down the "cmd" and shift key key and press the "R" key, or hold the shift key and hit the refresh button in the top bar.
  4. Firefox, Safari and Opera: Hold down the shift key and click on the "reload" button in your browser header bar (it's usually a curly arrow - hover your mouse over it to see a message telling you what it does - it should say something like "reload the current page").

3) Clear your cache

If neither kind of refresh gives you the correct display of your web page, you can also try closing and opening your browser. If that doesn't work, it's time to clear your cache. The instructions on how to do this are different for different browsers and version, so please find the correct instructions below.

Browser and version

If you don't know what browser and version you're using, then if you're on a PC, you're probably using Internet Explorer, especially if you click on an icon labelled "internet" or one which looks like a large lower case "e". The icon for Chrome is a circle in green, red and yellow, Firefox is a globe with an orange fox curled up over the bottom half, Safari is a circular compass and Opera is a large red "O".

To find the version, click on a "?" or "help" icon if there is one in the header bar of your browser and there should be an item "About Internet Explorer" (or whatever your browser is called). If it says "About Internet Explorer 8", then go no further, you're using version 8. If it doesn't have a number, click on the link to see it. It'll probably say something like 8.0.3.567.3321. If there is no help menu, try looking for the "About" link in the tools menu.

If you're using a Mac, click on the browser name menu item in the very top menu beside the "apple" menu on the left e.g. "Opera" and then on the "About Opera" menu item. This will give you the version number.

Internet Explorer 8 and 9

  1. Click on the "Tools" menu (it may be cunningly disguised as a cog icon). If there is an option to "Delete browsing history", click that and skip to step 3. if there isn't an option like this, select "Internet Options" and go to step 2.
  2. On the "General" tab, under the "Browsing History" section, click on the "Delete" button.
  3. On the next screen, select the "Temporary internet files" box and uncheck the other boxes.
  4. Click the "Delete" button. 
  5. Close the small window and refresh the page.

Internet Explorer 7

  1. Click on the "Tools" menu (it may be cunningly disguised as a cog icon). If there is an option to "Delete browsing history", click that and skip to step 3. if there isn't an option like this, select "Internet Options" and go to step 2.
  2. On the "General" tab under the "Browsing History" section, click on the "Delete" button.
  3. On the next screen, under the "Temporary internet files" section click the "delete files" button.
  4. A confirmation window pops up. Click "Yes". 
  5. Close the small window and refresh the page.

Chrome version 10+

  1. Click on the spanner icon (generally it's on the far right of the location bar in the top bar).
  2. Click on the settings menu item.
  3. Click on the "Under the hood" heading in the right hand panel.
  4. Click the "Clear browsing data" button at the top of the page.
  5. Select the "the beginning of time" from the "obliterate" drop down menu.
  6. Make sure the "empty the cache" box from the list is checked.
  7. Click the "Clear browsing data" button.

Firefox version 4+

  1. Click the Firefox menu on the top left of your browser. If there is a "history" option with a right-pointing arrow beside it, click the arrow and select "Clear recent history". If there is no "history" option with an arrow, click on the "Tools" menu and select "Clear recent history".
  2. Make sure the "Details" section is expanded and then check the box next to "Cache" and uncheck all the other options.
  3. In the drop down menu labelled "Time range to clear" select "Everything".
  4. Click the "Clear now" button. The computer will start deleting files, which takes a few seconds. When this is complete, the cache is empty.

Safari

  1. For Windows PCs, click the "edit" menu and for Macs click the "Safari" menu.
  2. Click the "Empty cache" option.
  3. On the confirm screen click "Yes" or "Empty".

Opera

  1. Click the "Tools" menu and select "Delete private data". If there is no such option, open the "Settings" menu and look there.
  2. Open the "Detailed options" section and check the box beside "delete entire cache". Uncheck the other boxes.
  3. Click the "Delete" button.

If you have a different browser or version from the ones above, Google is your friend. Just search for "clear cache" (without the quotes) and the name of your browser and version and you're bound to get something helpful. If clearing your cache doesn't help, and your Beetlebrow web site still doesn't look right, please get in touch and we'll investigate.