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.
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.
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:
http://www.yourdomain.com/yourimage.jpg
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.)
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.
www.example.com/somethingelse.html
The "index.html" page is the only one that can appear without being explicitly asked for.
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.
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" "http://www.w3.org/TR/html4/loose.dtd">
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
In this lesson we've taken a look at some of the common problems that plague web designers, including:
Register now for full, unlimited access to over 120 free lessons.
(No credit card needed. Just enter your email address!)
Questions & Comments + Add a comment