Browser Compatibility Tutorial

by Tom Dahm

 

This tutorial explains why you may be seeing browser display errors and recommends steps to avoid these problems. The Browser Photo service helps you know if you have browser display errors by showing you actual snapshots of your page under different browsers, computers, and screen resolutions.

HTML Toolbox shows you whether display errors are due to browser compatibility problems or HTML code errors. HTML Toolbox has a one-click repair feature that repairs most coding errors, but in some cases your display problems may be due to other factors.

 What Causes Browser Display Differences?

 

What You Can Do


What Causes Browser Display Differences?

 

Different Browsers

Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page. The result of this translation is a little like giving two human translators a sentence written in French and asking them to translate it into English. Both will get the meaning across, but may not use the same words to do so.

 

The basic rules for translating HTML documents are established by the World Wide Web consortium, which publishes the official HTML standards. But there's considerable room for interpretation within those ground rules.

For example, the HTML standards say that the TABLE tag should support a CELLSPACING attribute to define the space between parts of the table. But standards don't define the default value for that attribute, so unless you explicitly define CELLSPACING when building your page, two browsers may use different amounts of white space in your table.

 

In addition, the HTML standards usually run ahead of what the browsers support. No browser as yet supports 100% of the HTML Version 5 standard, but some browsers come closer than others. Over the past few years Internet Explorer has done a much better job of this than Netscape Navigator, though Opera has done arguably the best job.

 

But since support for the latest HTML tags isn't universal, you could be building your pages with parts of the language that not all browsers understand. In that case the browser will ignore that part of your page it can't translate, and the way your page displays will be affected.

 

This problem is further complicated by browser-specific "HTML extensions." Back during the heyday of the Browser Wars, both Netscape and Microsoft tried to get a competitive edge by running ahead of the HTML standards, inventing their own tags and attributes.

 

The theory was that Web designers would fall in love with these attributes and put little buttons at the bottom of the page saying, "Best viewed with Netscape Navigator." So Internet users would rush to download that browser and, voila, Netscape would win the Browser Wars.

 

In practice no Internet user will download a new browser just to view your Web site, so these HTML extensions only created headaches for Web designers.

 

The best way to minimize these problems is to pay attention to browser compatibility when building your Web page. Avoid using HTML extensions and be careful about using cutting-edge features of the language that may not yet be supported by all the major browsers.

 

We also recommend you test your pages with HTML Toolbox and review its Browser Compatibility report.

 

Different Browser Versions

The major difference between two versions of the same browser is their support for newer portions of the HTML language. A new browser is generally better at displaying Web pages than an old one.

 

However, Internet users tend to upgrade their browser based on the addition of new features, like email integration and instant messaging. If a user doesn't care about these features, they're happy to keep surfing the Web with their old browser.

 

  Different browser versions can break pages.

That presents a problem for Web designers, because for some length of time after the new browser appears, a significant minority of people will still use the previous version. So rushing to build pages with the HTML features supported by the new browser will have to wait.

A good rule of thumb is to design your pages to work for the last two versions of the major browsers.

 

While a handful of people use browsers older than that, their numbers aren't large enough to justify the sacrifice required to support them. A few people still use Version 3 browsers, but these browsers don't support Cascading Style Sheets, which are the most important addition to HTML in the last 6 years.

 

Also note that new browser versions sometimes represent major changes in a browser, and in these cases all bets on the browser's behavior are off.

For example, Navigator Version 6.1 is a complete rewrite of Netscape's browser, so a page that worked well under Navigator Version 4 may not work under Version 6. That's especially true if you use Dynamic HTML on your pages.

 

Different Computer Types

The Macintosh is still used by 12% of computer users, and has a very loyal following among graphic designers and publishers. In theory, if you view your page on both a PC and a Mac using the same version of the same browser, it should display the same, right?

 

In practice that's rarely the case. There are three reasons for this:

 

  • Font Availability. When you tell your Web page to use a particular typeface, such as "Arial," you may not always get the font you want. Fonts are a computer resource, and not all computers have the same fonts as your computer. That's true even between different PCs, but it's especially true between the PC and the Mac. If the typeface of your page suddenly changes between these computers, you've probably used a font that isn't available on both computer types.

  • Font Size. The Mac will generally render your typeface in a smaller pixel size than the PC will. That's especially true if you use the FONT tag to set your type size, since this tag uses abstract units to define size. You can avoid this problem is you use Cascading Style Sheets to set your font size in pixels. ac.

  • Internet Explorer. Microsoft outsources the development of Internet Explorer for the Mac, and so to a large extent this is a different browser from the PC version. In particular, the Mac version of Internet Explorer is prone to quirks and bugs that you won't see in the PC version. If you check your Web page under only one browser on the Mac, do so under Internet Explorer!

 

Our free Webmaster Tips Newsletter archive contains a number of important tips for avoiding problems between the PC and Mac.

 

Different Screen Sizes

If you don't test your pages using different screen resolutions, your page may be stretched to fit a large screen, or be cropped to fit a small screen.

Many experienced Web designers use HTML tables to control their page layout, yet they design their pages on large, 1024x768 pixel screens. When these pages are displayed on smaller computer screens, the browser may not be able to fit all the content onto the screen. In these cases, the content will scroll of the right of the page. While this may not sound like much of a problem, users hate scrolling left and right to view a page.

 

This problem should be easy to avoid, yet a surprising number of otherwise well-designed Web sites don't fit within the standard 800-pixel PC computer screen. This is especially a problem for pages built by graphic artists using a Macintosh, whose standard screen size is 1024x768. Many designers forget that designing for an 800-pixel screen means using roughly a 750-pixel layout.

 

Many less experienced Webmasters design their pages without tables, or dimension their tables to fit 100% of the screen width. If you've built your Web page this way on a computer with an 800-pixel screen, you may be surprised how your page is stretched to fit a larger screen. Text and graphics that were adjacent on your smaller screen may not be so on a large screen.

 

To avoid this, wrap the content of your page inside a single, large, one-cell table. Set the width of this table to be about 560-pixels, if you're designing for a 600 pixels layout, or 750-pixels if you're designing for an 800 pixel layout.

 

Because the majority of Internet users have a screen resolution of 800 pixels or less, it's a bad idea to design your site for a larger screen.

 

Different Font Sizes

Most browsers allow users to customize their default font size. Many users who work on computers all day do this to reduce eye strain. As a result, user preferences may cause the typeface that you used to design your Web page to increase as much as 50% larger in a user's browser. This increase in font size can hurt many carefully-planned page designs.

HTML Errors

Whether you're an HTML coder who builds Web pages by working with the raw HTML tags, or a designer using a WYSIWYG editor like FrontPage or Dreamweaver, the odds are your finished Web page will contain HTML errors.

 

We've tested over 52 million Web pages at NetMechanic. A recent sampling of results from our HTML Toolbox showed that a shocking 85% of these pages contained at least one HTML error!

 

Does that mean that 85% of Web pages are broken? Probably not, but it greatly increases the chance that these pages will have browser display problems.

 

An HTML error is some spot on your Web page where you've violated the official rules of HTML. For example, you may have two tags that overlap one another in a way that the standards say isn't legal.

 

In practice, the major browsers are robust and forgive many of these HTML errors. But not all browsers forgive the same errors. So your favorite browser may display your Web page without error, but another browser may be seriously affected by the same error.

 

HTML errors can destroy your pages under some browsers.  

For example, look at these images. The HTML code on this page forgets to close a single TABLE tag, which is a violation of the HTML rules. Internet Explorer forgives this error and displays the page correctly; Netscape Navigator can't recover from the errors and doesn't display the page at all!

 

The best way to avoid HTML errors is to validate your Web page with a tool like HTML Toolbox. A validator will scan your page and spot areas where you've violated the rules of good HTML. Correcting these errors and following the rules of good HTML goes a long way toward eliminating browser display errors.

 

The free sample of our HTML Toolbox will give you a full validation report on your Web page. The subscription version of this service can also automatically repair the majority of HTML errors it finds on your page. We don't guarantee that HTML Toolbox will cure all your problems, but it will save you hours of time spent solving these problems by hand.

 

Browser Bugs

As you've probably seen by now, building a Web page that displays well on all browsers isn't easy. To make matters worse, sometimes you've done everything right, and your page still doesn't display correctly under one specific browser. It's not your fault - you've just encountered a browser bug.

Unfortunately, browser bugs are a fact of life for Web designers. Each browser has its own unique set of errors and quirks that you have to adapt to. That's especially true with Version 4 of Netscape Navigator, whose early editions were rushed out the door to beat Internet Explorer to market. A columnist for WebReference recently called Navigator Version 4 "truly terrible browser."

 

  Browser quirks can break your pages.

For example, take perhaps the most widely encountered browser bug in existence. The HTML standards say that when you build an HTML table, you don't have to explicitly close each table cell with a closing </TD> tag. This closing tag is optional. Yet unless you explicitly close your table cells, Navigator 4 will not display your table if it is nested inside another table. Since nesting tables is common practice to control page layout, this bug wrecks many well-designed pages.

 

Netscape isn't the only browser prone to bugs. Internet Explorer for the Macintosh has a number of bugs and quirks in the way it handles text spacing.

When you

encounter a browser bug, it often means resorting to trial-and-error debugging to remove the problem. But before you resort to that, check our free Webmaster Tips Newsletter archive. It contains many tips related to browser bugs that can save you valuable time.


What You Can Do

We wish it were easy to cure browser display problems, but fixing them takes time. Read the following steps to learn what you can do to make it easier.

 

Set a Goal

First, understand that it's hard to build a Web page that displays perfectly on every version of every browser running on every computer. And doing so may require you to leave out features that you really, really want to have on your Web page. Building a Web page that's compatible with Version 1.0 of every browser would mean building a bland page filled with plain text.

So the first step to solving browser compatibility problems is to determine which browsers really matter to you.

 

To some extent we've done this for you in Browser Photo, since we don't include very old browsers such as Internet Explorer Version 3, or Netscape Version 2. While a handful of people still use these browsers, there aren't enough to justify the pain required to design pages for them.

 

But what about WebTV and Opera? We've included these browsers because they have small, but fiercely loyal followings. To quote one WebTV user, "We may be small in numbers, but build a site that's WebTV friendly and word gets around."

 

Within our own site, we track the pages typically viewed by WebTV users, and optimize those pages to work for that browser. Other pages aren't optimized for WebTV.

 

You may decide to do the same for your site, or you may decide that not enough people use these browsers to justify supporting them. In either case, define a goal and design toward it.

 

Avoid the Cutting Edge

The Web is hip; it's hot and exciting; it's radical. So many Web designers feel they have to build cutting-edge features into their Web page. That's a bad idea, because cutting-edge features are rife with browser compatibility problems, not to mention the impact they have on your page load time.

 

Web designers typically go through three stages of maturity: (1) I'm just learning; (2) I know it all, and I'm going to prove it by filling my site with cutting-edge features; (3) I've been burned by browser display problems, and only use what's compatible.

 

Not convinced? Try this exercise. Take some of the most well-known sites on the Internet: Yahoo, eBay, Amazon.com. Now go to those sites and look at their HTML code.

 

You won't see many cutting-edge features here. You won't see them using Java or Dynamic HTML. You won't see Flash.

 

You will see Javascript and Cascading Style Sheets. And most of all you'll see well-designed pages that work under all major browsers.

 

Including cutting-edge features in your site doesn't guarantee compatibility problems, but it greatly increases the chance of browser display errors. If you really feel you need to include these features, it's essential to test your pages under all major browsers. Check every page carefully with Browser Photo.

 

Pay Attention to Your Browser Compatibility Report

HTML errors are the leading cause of browser display problems. Making sure your Web pages are error free is one of the most important steps you can take to solve browser display problems.

 

That means running an HTML validator, like HTML Toolbox, over every page in your site.

 

The free sample of our HTML Toolbox will give you a full report of all the HTML errors on your Web page. The subscription version of this service can also automatically repair most HTML errors it finds on your page.

 

HTML Toolbox isn't a silver bullet; we don't claim that it will solve all of your browser display problems. But using it can dramatically reduce the time your spend tracking down browser display problems.

 

Validate Your Pages

Next to HTML errors, compatibility problems are the leading cause of browser display errors. We've already warned you about including cutting-edge features in your site, but compatibility dangers extend to all aspects of HTML.

 

HTML Toolbox includes a Browser Compatibility report that will identify HTML tags and attributes that aren't compatible with the three most recent versions of Netscape Navigator and Internet Explorer. Check this report and avoid HTML tags that aren't compatible.

 

Trial-and-Error Debugging

While HTML Toolbox can solve many browser display problems, there are some problems it can't address. That's especially true if these problems are caused by browser quirks and bugs. In these cases you'll have to track down your HTML problem yourself. Be patient; you can expect this process to take anywhere from one to four hours. Try following these steps to track down the cause:

 

  1. Make a copy of your Web page so you can restore it to its original form if you need to. Debug this page, not your original Web page.

  2. Isolate the problem on your copied page. Do this by eliminating as much of the page as you can. Is the problem at the top of your page? Then throw away everything but the top section of the page.

  3. View the pared-down page in the problem browser (use Browser Photo to do this if you need to). Is the problem still there? Then remove more of the page. Eventually you'll get to a point where the problem disappears. In that case, the last part of the page you deleted probably caused the problem.

  4. Now go back to your original page (or create a fresh copy of it and work with that). Look at the section of HTML that may have caused your problem. Change it.

  5. Now start a new Browser Photo session for your page. View the results and see if you've corrected your display problem. If so, congratulations!

  6. After you've fixed the problem, be sure to review your Browser Photo snapshots for other browsers too. It's a common mistake for HTML coders to fix a problem under one browser, and in the process break the page under another browser.

  7. Don't expect your first guess to solve the problem. More often you'll have to try a number of different things to see if they solve the problem. Again, be patient with yourself; this takes time.

Why do you care about Browser Compatibility?

Web sites reflect the company's professional image. If your site renders improperly or not at all, your company's reputation can be tarnished. If your site has browser display problems, visitors and potential customers will leave your site and not look back.

In contrast, a professional looking site will make visitors feel more comfortable, stay longer and browse more pages. And because of this increased credibility, they are more likely to purchase the products and services that they are looking for from you.

 

A simple purchase of HTML Toolbox and Browser Photo can protect your site from preventable errors, maintain your professional image, and increase your bottom line.

 

 

Webmaster Tutorials

 Webmaster
 Resource Center

Browse our Webmaster Tips library organized by topic. Learn about search engines, JavaScript, HTML, &  more!


Quick Search

Search our newsletter archives by keyword phrase.

 
                   

Volume 7 (2004)

 November
 September
 July
 June
 May
 April
 March
 February (Part 2)
 February
 January (Part 2)
 January

Volume 6 (2003)

 December
 November (Part 2)
 November
 September
 August (Part 2)
 August
 July (Part 2)
 July
 June (Part 2)
 June
 May (Part 2)
 May
 April (Part 2)
 April
 March (Part 2)
 March
 February (Part 2)
 February
 January (Part 2)
 January

Volume 5 (2002)

 December (Part 2)
 December
 November (Part 2)
 November
 October (Part 2)
 October
 September (Part 2
 September
 August (Part 2)
 August
 July (Part 2)
 July
 June (Part2)
 June
 May (Part 2)
 May
 April (Part 2)
 April
 March (Part 2)
 March
 February (Part 2)
 February
 January (Part 2)
 January