Home Lessons & Videos Site Building Beginner Web Design Troubleshooting

Web Design Troubleshooting

Affilorama members only


Watch a preview Join for free

Web Design Troubleshooting

2008-09-15 06:02:17

Sometimes when you upload your site, or look at it on a different computer, things can look wrong. Your text might be sitting in completely the wrong position, you images might have disappeared off the face of the earth, or your multicolored masterpiece might turn into a black and white tribute to Times New Roman font once you hit the "upload" button.

In this lesson we're going to look at some basic Web Design Troubleshooting.

My fonts look wrong on my friend's computer!

Without using some advanced techniques (which are beyond the scope of this lesson), you can only see a font on a webpage if you've got that font installed on the computer you're trying to view it on. If your fonts look different on your friend's computer, it is probably because he/she doesn't have that font.

Fortunately, there are some fonts that come standard with pretty much all the major operating systems out there. You can use these fonts on your website and be reasonably sure that your viewers will be able to see them:

Arial Arial Black,Courier New,Comic Sans,Impact,Georgia,Verdana,Times New Roman,Trebuchet MS

If your font is more exotic, you can try it in your page, but be sure to specify acceptable alternative fonts in case your viewers don't have that one.

For instance:

	h1 {font-family: Futura, Arial, Helvetica, Verdana, Sans-serif;}

This is a list of fonts in order of preference: Futura is the first choice, but if the viewer doesn't have Futura then the next choice is Arial, followed by Helvetica, Verdana, then any old sans-serif (ie it has no "feet") font.

If you really have your heart set on using a font, and you want to be sure everyone can see it, you have to turn it into an image.

I uploaded my website but my images don't display!

If your images were working fine when you previewed your page on your computer (preferably using your browser, not just the preview screen in your HTML editor), then 99% of the time you will have done one of the following two things:

1) You haven't uploaded your images, or you've uploaded them to the wrong place.

When you upload your site, you also need to upload all associated images and files that the website needs.

If you're sure that you uploaded your images, use your FTP program to connect to your web server and see if the images are where you expect them to be. Or you can type the location directly into your browser, like this:


If your image isn't there try uploading it again, paying particular attention to where it's going!

2) You've failed to click the "relative to document" checkbox when inserting your image.

If you're using a WYSIWYG editor like Dreamweaver, Frontpage or Nvu, sometimes the location of the image file gets a bit whacked. The software ends up recording the full location of the image on your computer, rather than the location of the image relative to your page.

So instead of the nice, tidy <img src="/img/yourimage.jpg">

you get:

<img src="C:\\Documents and settings\Owner’s documents\Desktop\website\img\yourimage.jpg">

Of course, this address just doesn't exist on your website, so there's no way that the browser will ever find that file.

To check this, open your website in your browser, go 'View > Page Source' and look at the source code of your page. Try to find the HTML that inserts that missing image. (If you can't read the HTML, use the "find" tool to search for your image file name inside that document.)

Once you've found where the image is called, have a look at where the HTML says the file is located.

If it looks a little like <img src="C:\\Documents and settings\Owner’s documents\Desktop"> then it's been inserted incorrectly. 

From here, you can either edit the location manually, or go back into your web authoring software and insert the image again, making sure that it's being inserted relative to the document (there should be a little checkbox for that option.)

I uploaded my website, but when I go to my domain there's nothing there!

The first thing to check is that you're uploading your files into the part of your website where the web files go! When you first connect to your website, you usually won't be in this folder at all - you need to look for the file called "www", "httpdocs" or "public_html" and upload your files into this. Otherwise nobody will be able to access them.

The second thing to check is whether you've named your "first page" or your "index" page as "index.html" or "index.php". When you type in your domain, the first page you come to has to be called "index.html", "index.php" or something along those lines. The "index" part is the key; if you've named your site's main home page as "somethingelse.html", you will explicitly need to type this into your browser address bar to see it.


The "index.html" page is the only one that can appear without being explicitly asked for.

My external stylesheet is working on one page, but I can't get it to work on my other page. Why?

(Or: My image shows up on my index page, but it doesn't show up on my article pages. Why?)

If you've got any variation on the "XYZ works on one page but not on another page" problem, it is probably because you're not referencing the files in question correctly.

This usually happens if you've got one page that works, and you've copied this page to try to make another page, but you've put this second page into a different folder/directory. The page is in a different place, but it's still following the old directions to images or CSS.

To fix this, you can go into your WYSIWYG editor (Dreamweaver or similar) and re-insert the image, or re-link the CSS file.

Or you can look at your HTML and fix it up there. Usually all you'll have to do is insert or remove some dots and slashes in front of the image or CSS files.

  • ../ means "go up one directory"
  • / (a slash without the dots) means "go to the top of the website/the root directory
  • a file name without any dots or slashes means "this folder/file is in the same folder as this HTML document.


  • ="../style.css" means "go up one directory and you'll find the style.css"
  • ="../css/style.css" means "go up one directory and you'll find the CSS directory, go into that and you'll find the style.css"
  • ="../../css/style.css" means "go up two directories and then down into the CSS directory to find style.css"
  • ="/style.css" means "Go right to the top of the website, and the style.css file is in there."
  • ="/images/icons/delete.gif" means "go to the top of the website, then down into the images folder, then into the icons folder, then you'll find the delete.gif image."

My page looks wrong in Firefox/Internet Explorer/Chrome/Safari/Opera!

In a perfect world a web page would look the same regardless of what browser or operating system you viewed it on. Unfortunately, this simply isn't the case, and a page that looks perfectly fine on one machine can look very strange on another (generally the biggest culprit for breaking page designs is Internet Explorer!)

Fortunately there are a few things you can do to reduce the problem:

1. Use a valid doctype

Your doctype is the first line at the top of your page that looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

or, if you're lucky, more like

<!doctype html>

You need to make sure, first of all, that you have one of these - without a doctype declaration, browsers revert to "quirks" mode, which means that browsers try to read the page like an older browser would read the page.

This is because there are many, many old pages on the internet that were designed to work using the various "quirks" of different browsers. If browsers were to stop being so "quirky" then all of these pages would break. By contrast, a page that includes a doctype is effectively telling the browser that it wants to be displayed in "standard" mode.

However, if you've designed your site without a doctype to begin with, you might find that inserting a doctype "breaks" your page in all browsers - this is because you may (inadvertently) have relied on these self-same "quirks" that the old browsers used to have.

If you really want everything to look as similar as possible across browsers, it's much easier to specify a doctype and tweak your site so that it displays correctly in "standards mode" than it is to create a bunch of hacks and workarounds to get it working in "quirks mode" in all the browsers.

2. Watch out for proprietary HTML

If you're using an older HTML editor you might find that it is inserting things that aren't real HTML. Microsoft's FrontPage in particular was traditionally notorious for inserting "Internet Explorer Only" HTML that wouldn't work in any other browser.

If you've specified a doctype for your page you should be able to run your page through an HTML validator to spot the invalid markup. Try the W3C validator service: http://validator.w3.org/. This site will "validate" your own website, and give you recommendations for fixing up the HTML

Lesson Summary

In this lesson we've taken a look at some of the common problems that plague web designers, including:

  • Fonts looking incorrect on different computers
  • Images not showing up
  • Pages not showing up, even after uploading your website,
  • Items working/displaying on some pages, but not others
  • Pages looking strange when viewed on a different machine


Learn something new? Share it with your friends!


Questions & Comments + Add a comment


Don't forget to follow us!

More topics

Essential Resources Every New Affilia... New to affiliate marketing? Not sure what it's all about? Then let us get you started!
Affiliate Outsourcing No one person can do everything on their own. Learn how to reduce (or even eliminate!) your workload with outsourcing.
Site Building As an affiliate, chances are you'll end up building a website or two. Here's your basic quickstart!
Marketing Ideas Needing inspiration? Wanting to go outside the box? Take a look in here for your next few marketing ideas!
Market Research for Affiliate Marketers To be a successful affiliate you must learn how to research their market before dedicating your precious time.
Pay Per Click Pay-per-click is one major method affiliates use to get traffic. Learn what it is and how you can use it effectively!
Search Engine Optimization Search engine optimization (SEO) is a major way of getting traffic to your site at minimal cost! Learn how to put it ...
Content Creation This section is all about content: How to write it, how to get it written for you, and other useful goodies!