Troubleshooting in HTML

An important part of coding is error checking. This month, we examine browser-related problems and also introduce HTML Validator Lite, which is a troubleshooting program that can identify syntax errors.

NETSCAPE VS INTERNET EXPLORER

You may have noticed inconsistencies in the way different browsers interpret Web pages. We'll focus on the two most popular, Internet Explorer (IE) and Netscape (NS). Other browsers may encounter similar problems, but, in most cases, consideration of the issues that follow should eliminate comparable errors across the board.

When creating a Web site, you must identify your testing parameters: whether to test the site at one or both popular screen resolutions (800x600 or 1024x768); whether to test the site with various text sizes (for IE go to View-Text size; for NS go to View-Increase Font); and, most importantly, which browsers and browser versions to accommodate.

When considering these points, the determining factor should not be which settings you personally prefer, rather, it should be which settings the majority of your viewers use. Some people code their sites specifically for IE, or only for Netscape. This is fine, as long as you realise that a significant percentage of the Internet population may consequently view the site in a less than perfect state.

Let's assume the decision is to code your site for both NS and IE (generally accommodating browser versions 4.x upwards).

Closing tags. By and large, when IE encounters a tag that is not closed off it will do it itself. Netscape, on the other hand, is not so forgiving, and leaves the tag open. View the following code in both IE and NS and notice the difference created by an absence of </TABLE>.

<HTML>
<HEAD><TITLE>Tags</TITLE></HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD> one </TD>
<TD> two </TD>
</TR>
</BODY>
</HTML>

Background colours and graphics in tables. Limit your use of background graphics and colours in tables, especially when using cellspacing as NS re-starts the graphic for each TD, and omits the background for cellspacing. IE, though, continues the picture across the table. Click here to see an example of this situation.

File name conventions. A good rule of thumb is to not use spaces in file names, whether they are graphic or HTML files; Netscape has been known to get confused. Take the following, for example:

<IMG src="my dog.gif" alt="puppy dog">

Netscape could see this and try to find a file called 'my', interpreting the space as an indication that it has reached the end of the value name. Consequently, the graphic may not display. This problem is not consistent, but it's best to replace the spaces in file names with underscores - my_dog.gif - or, alternatively, omit the space altogether, as in mydog.gif.

HTML VALIDATOR LITE

This freeware program greatly assists you with troubleshooting, and you can find it at http://www.htmlvalidator.com/lite/. When using this software, the first thing to do is close off any other editing instances of the file. Otherwise, you may save changes in Validator, go back to your open Notepad file, save it, and thereby accidentally save over any changes you made in Validator.

Click the red 'H' to calculate the errors. You will see three windows - the top is your code (which you may edit here); the bottom two are descriptions of the specific errors. The left is a list of all errors, the right is an easier-to-read description of the selected mistake.

When you highlight an error (bottom left window), the cursor is taken to the specific place in the file.

It is a good idea to fix errors in the order that they appear, as they may have a cumulative affect. For example, <img src="dog.gif> would cause many errors because of the lack of a closing quote. As soon as this error is fixed, however, most of the other problems vanish.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Cool Tech

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Breitling Superocean Heritage Chronographe 44

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?