Why Browsers Just Can't Get Along

Please distribute this freely. Credit any excerpts: 2000 WebSideStory, Inc.
(from February 25th newsletter)

It has happened to any HTML coder. You type up a spiffy
little Web page, check to make sure it works, and publish
it. You're all set, right?

But then there arrives that unwanted e-mail - someone
telling you they called up your page and all they got was an
empty screen. Doh! You realize that while you wrote the page
and proofed it using Netscape Navigator or Microsoft's
Internet Explorer,you made the common mistake of forgetting
to make sure the page also works when viewed with the other
dominant Web browser.

Problems like the above arise quite frequently, enough so
that we at the WebSideStory newsletter got a request last
week from the folks of AZGrand.com for an article about
the differences between browsers that can be understood by
Web novices.

Unfortunately there are no quick and easy solutions
about how to write Web pages that work perfectly on any
browser.

What accounts for the differences between browsers, and how
do those differences affect HTML coding issues? The "Big
Two" in browsers are Netscape and IE. IE currently holds
approximately 80 percent of the browser market, compared to
a little less than 20 percent for Netscape, according to
WebSideStory's StatMarket.com.

But Netscape's market share could rise after the release of
its 5.0 version this spring. (And of course, in addition to
IE and Netscape, HTML programmers who want to reach as wide
an audience as possible have to take into account smaller
browsers as well, such as Lynx, Internet Safari and Opera
Software's Opera).

The appearance of a Web page in a browser depends on whether
and how the browser supports HTML standards. And
unfortunately, each browser has its own approach.Netscape
and IE are both based on browser pioneer Mosaic, but each
has developed differences in technology, features, plug-ins,
and how they respond to HTML tags and technologies Netscape
generally keeps in line with HTML conventions and standards,
while Microsoft's approach is to provide extensions in
Internet Explorer that expand its functionality beyond what
is defined in standards specifications. The result is a
different set of scripting features in each browser, in
addition to subtle differences in spacing and font size.

One major issue between the Big Two is that IE is more
forgiving while Netscape is pickier in how it reacts to
minor coding snafus. This means that if you forget an end
table tag in your program, IE generally will still interpret
around the error and display your page, while Netscape will
return nothing within your table and beyond.

The simple way around those kinds of problems, of course, is
to make sure you view the pages you are working on in both
browsers, especially before publication.One thing to
remember is not to worry about whether the page looks
identical in different browsers - it won't. But as long as
the page retains the look and function you intended, that is
the important thing. Making sure all the links and elements
function is the major idea.

For more sophisticated designers, a solution (but one that
can be costly and time-consuming) is to supply two versions
of the same page, a fancy extension-rich one and a plain
early HTML-based version, and offer both from a universally
visible main page. This also accommodates surfers with
slower connections.

For example, ESPN serves up two completely different Index
pages, one for Netscape 3 and its lack of style sheets, and
the other for browsers that do support style sheets.

One difference between the browsers is that IE 4 and above
supports Document Object Models (DOM), which allows
developers and designers to access any parts or objects of a
page. This makes it easier to create more dynamic pages with
changing colors and fonts to backgrounds, texts and
graphics. Netscape is more static once it renders a
page, not allowing this flexibility. This is a difference
which many designers lament and which will be addressed in
its upcoming new version 5.0.

Another difference in newer versions of the main browsers is
how they handle dynamic positioning and the creation of
script blocks, which gives designers greater control and
ease in positioning elements exactly where they desire.

Both IE and Netscape comply with Cascading Style Sheet
standards, but the two use different techniques. IE exposes
most of its dynamic HTML capability through a style object,
while Navigator exposes the methods and properties directly
off each HTML element.

For more complex coding, a main issue is not which company's
browser is being used but which version. Both IE and
Netscape's newer browsers support many more HTML
technologies and tags than older versions. For example,
Netscape 3.0 doesn't handle style sheets but version 4 does.
To detect which browser a viewer is using, sophisticated
coders utilize active server pages (ASP) technology. Since
the browsers display graphics differently, the ASP will
detect and then add or take away a pixel to the image
depending on the browser's characteristics.

While JavaScript is used on the client side to sniff out
what version a viewer is using, on the server side a Common
Gateway Interface (CGI) can be utilized to view the source
and make the necessary adjustments.

Another good idea is to test the look of your page's design
at both a 640 x 480 resolution (minimum for Windows) as well
as the standard 800 x 600.

But an easy answer to all this? Well, that's just not the
nature of HTML....