Crossing Divides:

Browser and Platform Compatibility

Presented at the Fourth Annual

Consortium of Academic Technology Staff (CATS) Conference
April 7-11, 2001
California State University, Long Beach
by Paul Nozicka
CSU, Sacramento Webmaster
CSUS Regional & Continuing Education Faculty

Introduction:
Why are there so many poorly designed Web sites out there? Perhaps the numerous browsers
available could have something to do with it. Although Microsofts Internet Explorer (IE) and
Netscapes Navigator (Navigator) Web browsers dominate roughly 94% (online source:
http://dreamink.com/design5.html) of the market, programming differences between different
versions of the same browsers create headaches for Web designers.
As if this wasnt enough, what about different end-user platforms and programming differences
between the same browser and browser version on different platforms or simply platform
specific differences that manifest themselves in problematic design considerations?
Since it is nearly impossible to predict the environment that an end-user will be using when
viewing a Web site it becomes the responsibility of the designer to address cross-platform and
cross-browser compatibility issues.
This workshop will introduce you to various cross-platform and browser compatibility issues and
present possible solutions to dealing with such concerns.

Cross-Platform Issues:
Computer platform makes a difference to users because certain operations in browsers are
processed locally. As a result there are some cross-platform concerns with:

Font Face
Font size
Gamma value
Color shifting
Screen resolutions

FONT FACE:
When stipulating a font face in your HTML document you probably use a line of code like:
<font face=Arial>some text</font>
But what happens when an end-users computer doesnt have Arial installed on it. Even worse
what happens when you consider that the system fonts (those that come installed on a
computer as part of the operating system) are different on Macintosh and Windows machines?
The most that we can be certain of is that hopefully all of the system fonts that came on an endusers computer are still there. However, since this list differs from platform to platform how
could you address this concern? The easiest was is understand font families and stipulate
multiple names of font faces that are part of the same family.
<font face=Arial, Helvetica, sans-serif>some text</font>
<font face=Times, Garamond, serif>some text</font>

In each of the above examples the order in

which the fonts are listed represents the
priority level of each font face. The last
name in each example would result in
whatever the default font for that font family
is on that end-users computer. Notice that
Arial, Helvetica, Chicago, Geneva, and
Verdana are all sans-serif fonts. They do
not contain the artistic feet and tails that
Times, Times New Roman, New York,
Palatino, Garamond, and Century
Schoolbook (serif fonts) have. Courier also
has feet and tails, however, because each
character in this particular font occupies the
same amount of horizontal space (like a
typewriter), this font is a monospaced font.
It is often used to display lines of code in
the body of some text.

FONT SIZE:
We are all familiar with the DPI (Dots Per Inch) acronym referring to the resolution of printed
materials. However, monitors are composed of individual rectangular picture elements (pixels)
and the resolution of a monitor is measured in pixels per inch (PPI). Simply enough you say? I
wish. This is where the fun begins. On a Macintosh one inch is defined at 72px. Thus, there
are 72 pixels per 1 inch. Unfortunately, in his infinite wisdom, Bill Gates and Microsoft have
equated 96 pixels with 1 inch for monitors on Windows-based platforms.
Therefore, HTML text will be displayed 33%
larger on Windows when compared to
Macintosh (and 33% smaller on a
Macintosh when compared to Windows).
Now isnt that wonderful? Lets take a look
the relative differences and then how to
address this issue.
Addressing this issue may be as easy as
ignoring it. I usually use an HTML font size
of 4 (<font size=4>). Relative to a
Windows machine (I am a preferred
Windows user) this is about the equivalent
to a pitch size of 12. Of course (once
again, relative to a Windows machine) on a
Macintosh this will be approximately equal
to a pitch size of 10. Thus, in order to
ensure that the HTML text displayed on a Macintosh is large enough, I swallow my pride and
use the relative font size of 4 (<font size=4>). I prefer a relative size of 2 (<font

size=2>) but, in my quest to be a good designer I need to be sympathetic to my Macintosh

loving end-users), or
I could implement a JavaScript to parse the
platform of the end-user and then use the
appropriate platform-specific Cascading Style
Sheet (CSS or style sheet). On the left is a
screen shot from both a Macintosh (IE 5) and
Windows (IE 5.5) machine of the same HTML
file implementing the abovementioned
JavaScript.
Notice how the font sizes are the same
regardless of the platform. (I also had the text
display in a different color to prove that I
wasnt lyingthis really does work! Too bad I
didnt use a color printer!) To get this
technique to work properly you will need to
have two style sheets, one for each platform.
You will also need to make sure that you have
named your declarations (HTML elements,
classes and IDs) the same.
GAMMA VALUE:
In computer imaging and display screens, gamma refers to the degree of contrast between the
mid-level gray values of an image. In laymen terms, a monitor on a Macintosh system will
appear lighter (brightness) to a monitor on a Windows system. Not really a big deal but,
nonetheless, a cross-platform difference. Alright, let me hear itthe question on your mind: So
what do you do about Gamma values? {{{laughs}}} Well, nothing. The only time the difference
in Gamma values may present a problem is when a photographer is posting images online. The
key here is to be aware of the limitations in the environment for which you are designing.
However, if you have OCD tendencies (like myself) and tend to be slightly retentive (again, like
myself) then you could always have separate images for each platform and use a JavaScript to
parse platforms and use either the respective platform-specific HTML document or platformspecific image file. Of course, you do realize the amount of work needed to accomplish this
task has now increased exponentially. This is the exact reason why I dont worry about
addressing gamma value differences.
Again, the key item to remember here is that if it looks right on the Mac, it will appear
considerably darker on the PC screen. If it looks right on the PC, it will look too pale on the
others. End of story!
COLOR SHIFTING:
Ah, so now the Gamma thing we talked about earlier comes into play again. The same colors
viewed on a Mac and PC will vary because of the gamma differences. However, keep in mind
this will only result in a difference in the brightness of the image. On the other hand, both
Macintosh and Windows systems have different system colors.
To deal with this you should restrict your color selection to those available on the 216 web-safe
color palette. This palette contains the most common colors that are consistent with both the
Macintosh and Windows platform and will not dither (dithering is the attempt by a computer

program to approximate a color from a mixture of other colors when the required color is not
available) when viewed by a 256-color (8-bit) system.
Although developing and viewing Web pages with a 16- or 24-bit color video display reproduces
graphic imagery at its best, 16- and 24-bit color video display capable monitors are still not the
normal configuration with most users. Web pages may be designed with a 16- or 24-bit video
display, but all images should be viewed with 8-bit mode to check color, preferably testing
images on various platforms, which may visually appear suitable on your development platform.
However, areas of a solid color that is not part of the 216-color Web-safe palette may have
speckles as a result of dithering.
Keep in mind that monitors, like televisions, are all different. Have you ever seen the TV display
at Circuit City, Good Guys, or Best Buy? They are usually playing the same show and there is a
subtle, yet noticeable difference between each one. Computer monitors, like televisions, are
cathode ray tubes (CRT), use a RGB (red, green, blue) color composition scheme, and also
present a varying degree of color shifting.
A table of all 216 colors available in a Web-safe palette may be found online by performing a
simple search or by visiting: http://www.csus.edu/web/palette.htm
SCREEN RESOLUTION:
In the early days of Web design, we assumed 640- by 480- to be a good foundation for design.
A 600-pixel width has since become a standard for fixed layouts. The difference between 640and 600- is accounted for by browser chrome, which is the browser itself: scroll bars, buttons,
and margins. Nowadays most users have 800- by 600- or larger displays.
To address this issue you could, once again, utilize a JavaScript to parse the end-users screen
resolution and redirect them accordingly, assuming that you have the time, patience, and
knowledge; or you could simply account for these differences and address creatively them
during the design phase of your project.
To account for these differences you need to know how much screen real estate is available in
each browser on each platform. For more information on this see the following section on
canvas size under browser compatibility issues.

Browser Compatibility Issues:

As if having to understand the differences between computer platforms wasnt enough, there
are also differences between different versions of the same browser on the same platform.
These include:
Offset
Canvas size
Browser-specific tags
Tables: cell backgrounds
OFFSET:
Offset refers to by exactly how many pixels is content offset from the edges of the browser
window. When you view an HTML document in a browser there is a margin, or gutter, along the
left and top edges (margins) of your browser window. And of course the distance from the edge
differs between Navigator and IE, would you expect anything else? Oh yeah, I almost forgot to

mention that this value also differs with respect to platform. Thanks guys! Lets take a look at
what these values are.
BROWSER
IE 5.x (win)
NN 4.x (win)
NN 4.x (mac)
IE 4.x (win)
IE 4.x (mac)
NN 3.x (win)
NN 3.x (max)
IE 3.x (win)
IE 3.x (win)

HORIZONTAL OFFSET
10
8
8
10
8
10
8
10
8

VERTICAL OFFSET
15
8
8
15
8
15
8
16
8

KEY:
IE = Microsoft Internet Explorer
NN = Netscape Navigator (Communicator)
Win = Windows (95, 98, NT)
Mac = Macintosh
measurements are in pixels

The best way to functionally deal with these margins and their differing values is to override the
default browser offset. To do this include the following attributes in your opening <BODY> tag.
<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
Notice that there are two pairs of attributes used to accomplish the same task. Whats the point
of having different offset values if you refer to these attributes using the same name? At any rate,
one pair is for Netscape (marginwidth & marginheight), while the other pair (topmargin &
leftmargin) addresses IEs need for attention. (P.S. This technique does not work in Netscape
3.0. But honestly, how many people are using Netscape 3.0?)
CANVAS SIZE:
One of the most frequently asked questions by novice and inexperienced designers is, To what
size should I design my page? The first thing you need to do is decide what will be the lowest
common denominator that you will design for. Remember for fixed layouts a 600-pixel width
has become a common design convention. Its even the width to which I design my pages. For
the most part (because virtually none of my content is ever flush right) a 600-pixel width works
well in nearly all browsers and appears to print on US letter paper without chopping any of the
page content off along the right margin. (FYI: a 600-pixel wide page will print out at 8.3 inches,
so if the printer youre using has more than a 0.1 inch gutter you may potentially have some
chopping.)
Once you have decided on a lowest common denominator it is time to educate yourself with,
what else butmore browser discrepancies. Lets take a look at some of the available screen
real estate on the various browsers on different platforms. These measurements were taken
with the browsers in their default maximized states after installation with all the toolbars
showing. Keep in mind that many people will not customize their browsers and use them in
their complete and unadulterated default states. But first lets see what Im really referring to
when I say screen real estate.

Notice the horizontal and vertical span lines indicating the available screen real estate. (If
youre curious, this screen shot is of Netscape 4.something on a Macintosh.) Now that weve
gotten that out of the way lets see those numbers. (Note: these canvas size measurements
do not include the browser offsets we discussed earlierget in the habit to overriding the
default browser offsets so they are no longer a factor and so that you can optimize your
available screen real estate.)
BROWSER
IE 5.x (win)
NN 4.5+ (win)
NN 4.0x (win)
NN 4.5+ (mac)
NN 4.0x (mac)
IE 4.x (win)
IE 4.5x (mac)
IE 4.0x (mac)
NN 3.x (win)
NN 3.x (mac)
IE 3.x (win)
IE 3.x (mac)

640x480 width
600
604
604
592
582
600
563
574
600
582
613
598

640x480 height
275
294
294
309
315
275
318
321
270
306
276
317

800x600 width
760
764
764
752
742
760
723
734
760
742
763
758

800x600 height
395
414
414
429
435
395
438
441
390
426
396
437

measurements are in pixels

Unfortunately, there is one more annoying complication: When Microsoft Office is installed on a
PC, the Office taskbar is automatically added to the right edge of the desktop. Its 43 pixels
wide, which makes the overall canvas width 43 pixels less than what is listed above. (By the
way, if users move the Office taskbar from the right edge of the screen to the bottom edge, it
takes up 32 pixels of canvas height instead.)
So now you want a definitive answer to that age-old question about what size to design for. If
we look strictly at the numbers, your available screen real estate for all browsers on both
platforms (with no MS Office taskbar) is:
BROWSER
All browsers,
both platforms

640x480 width

640x480 height

800x600 width

800x600 height

574

270

734

390

However, when I design my pages, especially my home page, I dont want any scrolling so my
home page dimensions are: 600x364. It is important that you realize what my lowest common
denominators are when considering these dimensions. I design down to the available screen
real estate of 4.x browsers on a 800x600 screen resolution horizontally and 640x480 screen
resolution vertically. Why? I dont want any of my end-users to have to rightward scroll. That is
simply poor design. Thus, I accommodate a 640x480 screen resolution horizontally to avoid
this. However, a 800x600 screen resolution is what a majority of end-users (~90%) currently
use. Therefore, if you are a 640x480 screen resolution person you are essentially in the
minority and need to expect to scroll vertically more often.
BROWSER-SPECIFIC TAGS:
Perhaps I should start with a little background. Three of the big players in specifications are the
World Wide Web Consortium (W3C), Microsoft Corporation, and Netscape Communications.
These three (and others) would meet and discuss HTML specifications; the W3C because thats
what they do; Microsoft and Netscape because of the prevalence of their respective Web
browsers in the market. They would sit around drinking tea and having a jolly-ole time. Then,
Microsoft would go back to Redmond, WA and Netscape to Mountain View, CA and would
independently start developing proprietary tags (HTML tags that only worked in their specific
browser). This was done in a vain attempt to persuade Web surfers to use their browser over
the other and to entice designers to use their tags (and in turn restrict end-users to a specific
browser). This was the start of, drum-roll please, the Browser Wars. {{{dum, dum, dummm}}}
It is to your benefit and that of your end-users if, as a designer, you are aware of what tags (and
attributes of HTML specified tags) are proprietary. I am not suggesting that you dont use
proprietary tags and attributes (actually I am), rather that you realize what works where and
when, and if you decide to use something proprietary that it doesnt detract from the usability of
the Web page. An excellent page is one that is truly usable to the end-user. When you design
Web pages you normally try to reach as broad an audience as possible, so you will try to use
only tags that can be understood by as many different browsers as possible, thus maximizing
the reach of your page. For the same reason you might not want to rush into using the latest,
newest, hottest HTML tag that was added to the latest browser version it takes a significant
time until the majority of users have upgraded (studies have shown that a significant time is in
fact about 3 years).
Below are some of the common proprietary HTML tags and attributes. (When appropriate a fix
and/or the HTML specification will be indicated.) Those attributes indicated in red are
recommended not to be used because they possess a high potential for hindering the usability
of the page.

BACKGROUND SOUND
<bgsound src=soundfile loop=value>
IE
<embed src=soundfile loop=value autostart=value>
NN
FIX
Use both tags.
NON-SCROLLING BACKGROUND IMAGE
<body bgproperties=fixed>
IE
NN
unsupported
BROWSER OFFSET
<body leftmargin=value topmargin=value>
IE
<body marginheight=value marginwidth=value>
NN
FIX
Use both pairs of attributes in your opening <body> tag.
COMMENTS IN CODE
<comment></comment>
IE
HTML
<!--- comment text --->
HORIZONTAL RULE
<hr color=value>
IE
NN
Does not support the color attribute.
SCROLLING TEXT
<marquee>...</marquee>
IE
NN
unsupported
BLINKING TEXT
IE
unsupported
<blink>...</blink>
NN
WHITESPACE ELEMENT
IE
unsupported
<spacer size=value type=horizontal>
NN
FIX
Use a transparent GIF.
COLUMNS
IE
unsupported
<multicol cols=value>...</multicol>
NN
FIX
Use tables.
TABLES CELL BACKGROUNDS
<td bgcolor=color background=imagefile>...</td>
HTML
IE
supported
NN
supported with fix
FIX
Netscape will not display the background (color or image) of an empty cell. Therefore, place
a transparent GIF into each empty cell that has either a bgcolor or background attribute
and Netscape will display the background.
TABLES BORDER COLOR
<table bordercolor=color>...</table>
HTML
<table bordercolor=color bordercolorlight=color
IE
bordercolordark=color>...</table>
NN
Does not support the bordercolorlight or bordercolordark attributes.
MISCELLANEOUS
<iframe>...</iframe>
IE
Inserts a floating frame within the body of an HTML document.
NN
unsupported
IE
NN
FIX

unsupported
<ilayer bgcolor=color>...</ilayer>
Displays a background color behind the text contained within this paired tag.
Use a cascading style sheet.

There are many more proprietary tags and attributes than the ones listed above. Unfortunately,
it is not within the scope of this presentation to cover them in their entirety. Fortunately, you can
find more information by performing a simply online search.

Screen Readers:
Heres something that you probably havent thought aboutscreen readers. The visually
impaired are probably one of the most overlooked groups of end-users with respect to
accessible Web design. With all this concern over platform compatibility and IE vs. Netscape,
what about the screen reading software used by visually impaired end-users to view Web
pages.
This is entirely another facet of Web design which deserves its own time and place.
Information about accessible Web design can be found in various books and online locations.
Two excellent sites to start with are www.useit.com, Jakob Nielsens site on Designing Web
Usability, and the World Wide Web Consortiums site at www.w3.org.
If you design sites regulated by Section 508 and the American with Disabilities Act you will need
to familiarize yourself with what Web accessibility means and what special design
considerations are needed.

Testing:
Now that you are a Web designer completely educated on browsers and platform compatibility
issues, you will need to know what environments to test your pages in to verify that they have
addressed such issues. Once again, there is no way to determine what environment an
individual will be using when they view any of our pages. Therefore, it is important to have your
lowest common denominator identified so that you can select the appropriate low-end testing
environment.
Unless you are designing an Intranet I would suggest designing down to 4.0 browsers. This
doesnt necessarily mean that your home page needs to be visible in 4.0 browsers. What it
means is that your information should be accessible by 4.0 browsers. Whats the difference?
Well, you could easily have a text version of your home page (or entire site) and implement a
JavaScript on you home page to parse the end-users browser version and if they are using a
4.x browser (and your home page uses technology not supported by 4.x browsers) you could
automatically have them redirected to the text version of your home page. This is one of the
techniques used on the CSU, Sacramento home page to deal with 3.0 browsers.
[You can find a comprehensive list of what technologies and what mark-up language and
scripting language versions each browser supports online at www.csus.edu/web/browsers.htm.]
So after all that I guess I should help you out with identifying testing environments. In a perfect
Web designer utopia you would be able to test your pages in the following environments: (in the
real world you will want to test your pages in those environments indicated in red, once again,
testing down to your lowest common denominator.

WINDOWS 95
IE
3.x, 4.x
NN
3.x, 4.x
WINDOWS 98
IE
3.x, 4.x, 5.0, 5.5
NN
3.x, 4.x, 6.0
WINDOWS ME & NT
IE
5.0, 5.5
NN
4.X, 6.0
MACINTOSH
IE
4.x, 5.0
NN
3.x, 4.x, 6.0
OTHER TESTING ENVIRONMENTS
IE and NN with images turned off
AOL
Neoplanet
Opera
WebTV (emulator)
Lynx (text browser)
Using a screen reader
LINUX (UNIX)
It is important to realize that Microsoft has integrated IE into their OS (operating system) so
much that you can only have one version of IE installed at any given time. The only way to
have multiple versions of IE on the same machine is to set up partitions and install multiply OSs
each with its own version of IE. Once again, I am looking at a Web design utopia and realize
that this is not a realistic option for many. But, if it were, you would have a PC testing station
with multiple partitions, multiple Windows versions, and multiple versions of IE. However, since
this may not be feasible you need to be aware of the differences between each version of IE and
stay conscious of those differences during the planning and design phases of your Web project.
You should also test your pages on a Macintosh. If you dont have own a Mac then find one
and view your pages on it. If you are a PC user and have never viewed your pages on a Mac,
you might be in for a big surprise.
Heres a little tip: Netscapes 6.0 browser (Mozilla) is based on W3C HTML standards. If all
browsers were based on the W3C HTML standards we wouldnt need to be here right now, but
they arent. With the exception of the less popular Opera Web browser, Mozilla is the only
browser to be based on such standards. What does this mean? In theory it means that if your
pages view properly in Netscape 6.0, they should view properly in all browsers. Thus, I would
make Netscape 6.0 my browser benchmark.

Conclusion:
Dont let this all scare you. Yes, designing Web pages is a more detailed process than you may
have first thought. However, simply understanding the constraints of the medium for which you
are designing will allow you to identify browser and platform compatibility issues during the
planning stages of your project and address them during the design phase.

Through the creative use of tables to control layout, graphic elements to pull the end-user into
your page, and basic HTML you can functionally create an effective, usable, and enjoyable Web
site. Keep in mind that you dont necessarily need to concern yourself with the most cutting
edge technologydont use technology just for the sake of using technology. Advanced Web
technologies should be reserved for those components of your site that absolutely need to use
such technologies.
Always look for the most basic way to accomplish a Web design task and avoid proprietary
elements unless they dont interfere with the usability of your page. By doing so, you ensure
that you support a wider range of browsers and thereby dont exclude any group of end-users
simply due page elements or the technology used on your page.
Happy Web Designing!