Troubleshooting

when pages don't work

[snsetd]

I'm taking the dip into design via a course in DreamWeaver. The question of the week is: "There are going to be times when our pages don't work (or, some cases, you won't see any result.) Post your list of 5 to 10 troubleshooting recommendations."

I would say run it through a code validator and stay up all night trying to see what went wrong. Any other ideas out there in the trenches?

[lammert]

Look in the log files. Every webserver generates log files with information why pages load, or don't load.

[thecoalman]

I apply contrasting background colors to div's when starting a layout to make sure they are doing what I want them to do. Problems can arise that may not be evident simply because you can't see where the edge of the container really is.

[surrealillusions]

Does "change the idiot sitting in front of the keyboard" count as a recommendation?

:)

[snsetd]

Good one, Surreal...sometimes there is no option, though. In my case, there's no one to hand off to.

[rocknbil]

There are going to be times when our pages don't work (or, some cases, you won't see any result.) Post your list of 5 to 10 troubleshooting recommendations.

Use a valid document type. Although this doesn't insure perfect cross-browser compatibility, it certainly reduces those problems to a minimum.

Use an appropriate document type. Nearly every new page I see is an XHTML doctype. When asked why they chose this, the answer is invariably "Because it's the latest technology." Then you go on to see deprecated elements uses such as <center> and <font> (UGH!) which tells me they have no clue about the selected doctype. It was predicted that XHTML would replace HTML. This is not the case, HTML 5 is being finalized.

XHTML has specific applications, and unless you are actually using those applications and your server is actually serving up the text/xhtml content type, you are making things more difficult for yourself and should be using an HTML doctype. If you don't understand what I just said, all the more reason to NOT use an XHTML doctype.

Both discussed at length here [webmasterworld.com]

Validate your code. W3C validator [validator.w3.org]

Avoid browser-specific "hacks." This is true for plain HTML display, Javascript, server-side programming - never, ever code anything in that addresses a specific browser or version. If it won't work in that browser, find another valid approach that will work for all. The reason: this becomes a never-ending nightmare task, and those hacks may wind up breaking valid later versions of browsers.

Process of elimination. If your code is valid, it's a valid document type, and it's still broken, begin by saving a test file, then cutting out all extraneous elements in the CSS and html, and preview the page in chunks. Put borders on all your elements so you can see what they are up to. Quite often it's the combination of only one or two simple elements that are bringing the whole page down, and this is the fastest way to find them.

Use as many tools as you can understand. By this I mean that FireFox has literally hundreds of plug ins available to help you understand "what's going on" in a number of situations. Some of them are so robust it takes a manual to make use of them, some of them are simple and will accelerate your project and learning curve. Some examples are Live Headers, FireBug, Dust-Me (which locates unused CSS selectors) And YSlow, for example.

I will add, although it validates, always quote all attributes. This is not a troubleshooting tip, but it always helps to be as right as possible.

<a href="some-link.html">link</a>

not

<a href=some-link.html>link</a>

[snsetd]

Thank you, RocknBill.

I tried to imitate your text box, but just couldn't pull it off. How do you do that?

[webfoo]

I would suggest learning HTML before learning to use a WYSIWYG editor like Dreamweaver. I learned HTML a few years ago and can develop great websites using just Notepad (and graphics programs of course).

Once you know HTML, you can look at the source code and the problem could be an obvious flaw in the code, easily fixed in Notepad.

[snsetd]

Good point, Webfoo. DreamWeaver was my only decent option for a spring term class, though. I'll do it backwards and take HTML in the fall. My ambition is just to get my feet wet, a taste of what is out there, and some semblance of an idea about how it all fits together.

[rocknbil]

I tried to imitate your text box...

You mean the quote? use [ plus quote plus ] and [ / plus quote ].

[Baruch Menachem]

document.write or echo every variable every step of the way. Or if you have tools, make sure you know what the variables are doing.

Most of the really horrible errors are simple and "duh" moments. Like putting semicolons where they don't belong or using single instead of double quotes.

[snsetd]

RocknBill: I'm not getting something here...
plus quote plus]incredible[/plus quote]
I take it this isn't what you meant.How about:
[+incredible+]incredible[/+incredible]
Nope. I sure like the "Preview" feature on these posts, though.

Baruch: This is the first I've heard of document.write and echo variable...but, I'll definitely look in to it. Thank you.

[rocknbil]

Sorry snsetd, I'm probably confusing you. Remove the word "plus" - I put it in there to keep it from creating another quote. it's a variation on BBcode. Here's the docs [webmasterworld.com].

[snsetd]

Wow! Incredible! Thank you, RocknBill.